2017-10-02 6 views
0

いいえ私は単純なメニューオプションを持っています;ユーザがそのカテゴリのメニュー項目divの1つをクリックすると、画面に表示されます。 *(すべてのコースは、デフォルトですべてのdivを表示する必要があります)。簡単なメニューオプションを作成しようとしました - クリックしても機能しません。

それがどのように見える:https://imgur.com/a/KZ9Ot

例: FOREXメニューをクリックした場合は、と外国為替に関連するdiv要素は、他のdivがdisapearする一方、すべてのコースメニューオプションをクリック上のデフォルトになります表示されますanotheがクリックされない限り、すべてのdivを表示します。

私の試み:すべてのdivは、IMをクリックするとdisplay:blockに変更すると、表示するdiv要素を見つけるためにswitchステートメントを使用して、display: none;を持っています。

Uncaught RangeError: Maximum call stack size exceeded at n (jquery.js?ver=1.12.4:2) at HTMLDivElement. (jquery.js?ver=1.12.4:4)

/* COURSE SELECTION TOGGLE */ 
 
    jQuery(document).ready(function() { 
 
     \t \t jQuery('.toggle-course-box-forex').toggleClass('show'); 
 
    
 
    \t \t switch(jQuery('toggle-course-box').click()) { 
 
    
 
    \t \t  case jQuery('#forex').click(): 
 
     \t \t \t jQuery("toggle-course-box-forex").css({"display": "block"}); 
 
    \t \t   break; 
 
    \t \t  case jQuery('#stock').click(): 
 
     \t \t \t jQuery("toggle-course-box-stock").css({"display": "block"}); 
 
    \t \t   break; 
 
    \t \t  default: 
 
    \t } 
 
    
 
    });
/* COURSE SELECTION TOGGLE ONLY*/ 
 
    .pointer-cursor:hover { 
 
    \t \t cursor: pointer; 
 
    } 
 
    
 
    /* forex */ 
 
    /*.toggle-course-box-forex { 
 
    \t \t display: none; 
 
    } */ 
 
    .toggle-course-box-forex { 
 
    \t display: none; 
 
    \t \t transition: left 0.3s linear; 
 
    } 
 
    
 
    
 
    /* stock */ 
 
    .toggle-course-box-stock { 
 
    \t \t display: none; 
 
    \t \t transition: left 0.3s linear; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="course-body-container"> 
 
\t \t \t \t <ul class="courses-menu course-content-home" id="course-selection-btn"> 
 
\t \t \t \t \t <li class="course-item pointer-cursor" id="all-courses"><a>ALL COURSES</a></li> 
 
\t \t \t \t \t <li class="course-item pointer-cursor" id="degree"><a> DEGREES</a></li> 
 
\t \t \t \t \t <li class="course-item pointer-cursor" id="workshop"><a> WORSHOPS</a></li> 
 
\t \t \t \t \t <li class="course-item pointer-cursor" id="stock"><a>STOCK TRADER</a></li> 
 
\t \t \t \t \t <li class="course-item pointer-cursor" id="forex"><a>FOREX</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t <div class="course-prev-box"> 
 

 

 
\t \t \t \t \t <div class="course-preview-category-1 toggle-course-box flex-item toggle-course-box-workshop"> 
 
\t \t \t \t \t \t <img class="course-preview-img" src="img/course-icon.png"> 
 
\t \t \t \t \t \t <p class="course-preview-headline" id="secondary-headline">“Success with Stocks in PSX” Workshop</p> 
 
\t \t \t \t \t \t <p class="course-preview-content" id="para-text">Experience the 2 day workshop for an introductory course on success with stocks in PSX</p><br> 
 
\t \t \t \t \t \t <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="course-preview-category-7 toggle-course-box flex-item toggle-course-box-stock"> 
 
\t \t \t \t \t \t <img class="course-preview-img" src="img/course-icon.png"> 
 
\t \t \t \t \t \t <p class="course-preview-headline" id="secondary-headline">Art of Trading Stocks</p> 
 
\t \t \t \t \t \t <p class="course-preview-content" id="para-text">Welcome in my course “Art of Trading Stocks”. It is recommended for newbies and traders still not making profits in trading. This course purely provides education for learning trading skills and is not an income advisory, by any means.</p><br> 
 
\t \t \t \t \t \t <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t \t <div class="course-preview-category-3 toggle-course-box flex-item toggle-course-box-mba"> 
 
\t \t \t \t \t \t <img class="course-preview-img" src="img/course-icon.png"> 
 
\t \t \t \t \t \t <p class="course-preview-headline" id="secondary-headline">MBA(major course) Equity market</p> 
 
\t \t \t \t \t \t <p class="course-preview-content" id="para-text">Our upcoming course on subject “Capital market” is aimed to be offered as major for MBA program is in collaboration with recognized universities in Karachi and soon will be launched in coming semester (subject to approval in time).</p><br> 
 
\t \t \t \t \t \t <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t \t <div class="course-preview-category-4 toggle-course-box flex-item toggle-course-box-bba"> 
 
\t \t \t \t \t \t <img class="course-preview-img" src="img/course-icon.png"> 
 
\t \t \t \t \t \t <p class="course-preview-headline" id="secondary-headline">BBA (major course)Capital market </p> 
 
\t \t \t \t \t \t <p class="course-preview-content" id="para-text">Our upcoming course on subject ” Capital market” is aimed to be offered as major for BBA program in collaboration with recognized universities in Karachi and soon will be launched in coming semester subject to approval in time. </p><br> 
 
\t \t \t \t \t \t <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t \t <div class="course-preview-category-5 toggle-course-box flex-item toggle-course-box-stock"> 
 
\t \t \t \t \t \t <img class="course-preview-img" src="img/course-icon.png"> 
 
\t \t \t \t \t \t <p class="course-preview-headline" id="secondary-headline">Managing Trading and Investment in Stocks</p> 
 
\t \t \t \t \t \t <p class="course-preview-content" id="para-text">This course is designed for beginners and intermediary level students to learn about PSX. </p><br> 
 
\t \t \t \t \t \t <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t \t <div class="course-preview-category-6 toggle-course-box flex-item toggle-course-box-forex"> 
 
\t \t \t \t \t \t <img class="course-preview-img" src="img/course-icon.png"> 
 
\t \t \t \t \t \t <p class="course-preview-headline" id="secondary-headline">Introduction to Forex Trading</p> 
 
\t \t \t \t \t \t <p class="course-preview-content" id="para-text">Welcome in my course “Introduction to Forex Trading”. It is recommended for newbies and beginners still not making profits in Forex. This basic course purely provides education for learning trading skills and is not an income advisory, by any means.</p><br> 
 
\t \t \t \t \t \t <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t \t <div class="course-preview-category-2 toggle-course-box flex-item toggle-course-box-forex"> 
 
\t \t \t \t \t \t <img class="course-preview-img" src="img/course-icon.png"> 
 
\t \t \t \t \t \t <p class="course-preview-headline" id="secondary-headline">Becoming a Profitable Forex Trader</p> 
 
\t \t \t \t \t \t <p class="course-preview-content" id="para-text">Welcome to course “Becoming a profitable Forex Trader”. This comprehensive course purely provides education for learning and enhancing your trading skills and is not an income advisory, by any means. The entire course is designed with educational content carefully filtered what actually works.</p><br> 
 
\t \t \t \t \t \t <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t \t <div class="course-preview-category-8 toggle-course-box flex-item toggle-course-box-stock"> 
 
\t \t \t \t \t \t <img class="course-preview-img" src="img/course-icon.png"> 
 
\t \t \t \t \t \t <p class="course-preview-headline" id="secondary-headline">Introduction to technical analysis</p> 
 
\t \t \t \t \t \t <p class="course-preview-content" id="para-text">Welcome in my course “Introduction to Technical Analysis”. It is recommended for newbies and traders still not making profits in trading and they would like to learn technical analysis to sharpen their trading skills. This basic course purely provides education for learning trading skills and is not an income advisory, by any means.</p><br> 
 
\t \t \t \t \t \t <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div>

ない私のアプローチが間違っているのかわから:

は、エラーを取得?代替ソリューション?

答えて

1

switchを使用する理由がわかりませんので、私は別の解決策を作成しました。

これを試してみてください:

$(document).ready(function() { 
 
    $('.toggle-course-box-forex').toggleClass('show'); 
 
    $('#forex').click(function() { 
 
     $(".toggle-course-box").css({ "display": "none"}); 
 
     $(".toggle-course-box-forex").css({"display": "block"}); 
 
    }); 
 
    $('#stock').click(function() { 
 
     $(".toggle-course-box").css({"display": "none"}); 
 
     $(".toggle-course-box-stock").css({"display": "block"}); 
 
    }); 
 
    $('#workshop').click(function() { 
 
     $(".toggle-course-box").css({"display": "none"}); 
 
     $(".toggle-course-box-workshop").css({"display": "block"}); 
 
    }); 
 
    $('#all-courses').click(function() { 
 
     $(".toggle-course-box").css({"display": "none"}); 
 
     $(".toggle-course-box-mba").css({"display": "block"}); 
 
    }); 
 
    $('#degree').click(function() { 
 
     $(".toggle-course-box").css({"display": "none"}); 
 
     $(".toggle-course-box-bba").css({"display": "block"}); 
 
    }); 
 
});
/* COURSE SELECTION TOGGLE ONLY*/ 
 

 
.pointer-cursor:hover { 
 
    cursor: pointer; 
 
} 
 

 

 
/* forex */ 
 

 
.toggle-course-box{ 
 
    display: none; 
 
} 
 

 
.toggle-course-box-forex { 
 
    display: none; 
 
    transition: left 0.3s linear; 
 
} 
 

 

 
/* stock */ 
 

 
.toggle-course-box-stock { 
 
    display: none; 
 
    transition: left 0.3s linear; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="course-body-container"> 
 
    <ul class="courses-menu course-content-home" id="course-selection-btn"> 
 
    <li class="course-item pointer-cursor" id="all-courses"><a>ALL COURSES</a></li> 
 
    <li class="course-item pointer-cursor" id="degree"><a> DEGREES</a></li> 
 
    <li class="course-item pointer-cursor" id="workshop"><a> WORSHOPS</a></li> 
 
    <li class="course-item pointer-cursor" id="stock"><a>STOCK TRADER</a></li> 
 
    <li class="course-item pointer-cursor" id="forex"><a>FOREX</a></li> 
 
    </ul> 
 
    <div class="course-prev-box"> 
 

 

 
    <div class="course-preview-category-1 toggle-course-box flex-item toggle-course-box-workshop"> 
 
     <img class="course-preview-img" src="img/course-icon.png"> 
 
     <p class="course-preview-headline" id="secondary-headline">“Success with Stocks in PSX” Workshop</p> 
 
     <p class="course-preview-content" id="para-text">Experience the 2 day workshop for an introductory course on success with stocks in PSX</p><br> 
 
     <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 

 
    </div> 
 
    <div class="course-preview-category-7 toggle-course-box flex-item toggle-course-box-stock"> 
 
     <img class="course-preview-img" src="img/course-icon.png"> 
 
     <p class="course-preview-headline" id="secondary-headline">Art of Trading Stocks</p> 
 
     <p class="course-preview-content" id="para-text">Welcome in my course “Art of Trading Stocks”. It is recommended for newbies and traders still not making profits in trading. This course purely provides education for learning trading skills and is not an income advisory, by any means.</p><br> 
 
     <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 

 
    </div> 
 
    <div class="course-preview-category-3 toggle-course-box flex-item toggle-course-box-mba"> 
 
     <img class="course-preview-img" src="img/course-icon.png"> 
 
     <p class="course-preview-headline" id="secondary-headline">MBA(major course) Equity market</p> 
 
     <p class="course-preview-content" id="para-text">Our upcoming course on subject “Capital market” is aimed to be offered as major for MBA program is in collaboration with recognized universities in Karachi and soon will be launched in coming semester (subject to approval in time).</p><br> 
 
     <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 

 
    </div> 
 
    <div class="course-preview-category-4 toggle-course-box flex-item toggle-course-box-bba"> 
 
     <img class="course-preview-img" src="img/course-icon.png"> 
 
     <p class="course-preview-headline" id="secondary-headline">BBA (major course)Capital market </p> 
 
     <p class="course-preview-content" id="para-text">Our upcoming course on subject ” Capital market” is aimed to be offered as major for BBA program in collaboration with recognized universities in Karachi and soon will be launched in coming semester subject to approval in time. </p><br> 
 
     <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 

 
    </div> 
 
    <div class="course-preview-category-5 toggle-course-box flex-item toggle-course-box-stock"> 
 
     <img class="course-preview-img" src="img/course-icon.png"> 
 
     <p class="course-preview-headline" id="secondary-headline">Managing Trading and Investment in Stocks</p> 
 
     <p class="course-preview-content" id="para-text">This course is designed for beginners and intermediary level students to learn about PSX. </p><br> 
 
     <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 

 
    </div> 
 
    <div class="course-preview-category-6 toggle-course-box flex-item toggle-course-box-forex"> 
 
     <img class="course-preview-img" src="img/course-icon.png"> 
 
     <p class="course-preview-headline" id="secondary-headline">Introduction to Forex Trading</p> 
 
     <p class="course-preview-content" id="para-text">Welcome in my course “Introduction to Forex Trading”. It is recommended for newbies and beginners still not making profits in Forex. This basic course purely provides education for learning trading skills and is not an income advisory, by any means.</p><br> 
 
     <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 

 
    </div> 
 
    <div class="course-preview-category-2 toggle-course-box flex-item toggle-course-box-forex"> 
 
     <img class="course-preview-img" src="img/course-icon.png"> 
 
     <p class="course-preview-headline" id="secondary-headline">Becoming a Profitable Forex Trader</p> 
 
     <p class="course-preview-content" id="para-text">Welcome to course “Becoming a profitable Forex Trader”. This comprehensive course purely provides education for learning and enhancing your trading skills and is not an income advisory, by any means. The entire course is designed with educational 
 
     content carefully filtered what actually works.</p><br> 
 
     <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 

 
    </div> 
 
    <div class="course-preview-category-8 toggle-course-box flex-item toggle-course-box-stock"> 
 
     <img class="course-preview-img" src="img/course-icon.png"> 
 
     <p class="course-preview-headline" id="secondary-headline">Introduction to technical analysis</p> 
 
     <p class="course-preview-content" id="para-text">Welcome in my course “Introduction to Technical Analysis”. It is recommended for newbies and traders still not making profits in trading and they would like to learn technical analysis to sharpen their trading skills. This basic course purely provides 
 
     education for learning trading skills and is not an income advisory, by any means.</p><br> 
 
     <a class="course-preview-btn" href="course-detail-template.html"> LEARN MORE</a> 
 

 
    </div> 
 
    </div> 
 
</div>

+0

$をtoggleClass( 'ショー ');('-切り替えるコースボックス外為。')。 この行は何ですか? – Shaz

+0

@Shazは、クリックごとにshowクラスを追加して削除します。 – Aslam

+0

ああ、デフォルトではすべてのdivでデフォルトのすべてのコースメニューが表示されるようにする方法はありますか? – Shaz

関連する問題