如何在不激活其餘部分的情況下切換下拉部分的指示燈？

Question

我試圖編寫一個頁面，有幾個下拉菜單，標題旁邊有一個加號/減號指示符。問題在於，當我點擊標題時，全部的指標都起火了。

這裏的HTML：

<div class="linkBox"> 
    <div class="slide" id="s1"><h4><span class="plus ind">+</span><span class="minus ind">-</span> Title</h4></div> 
    <div class="content" id="c1"> 
     <p> 
     Sequitur disserendi ratio cognitioque naturae; Efficiens dici potest. Addidisti ad extremum etiam indoctum fuisse. Optime, inquam.Polycratem Samium felicem appellabant. Summus dolor plures dies manere non potest? Beatus sibi videtur esse moriens. Non laboro, inquit, de nomine. Quid censes in Latino fore? 
    </p> 
    <br> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tubulo putas dicere? 
    </p> 
    <br> 
    <h3>Click here for more information.</h3> 
    </div> 

    <div class="slide" id="s2"><h4><span class="plus ind">+</span><span class="minus ind">-</span> Title</h4></div> 
    <div class="content" id="c2"> 
     <p> 
     Sequitur disserendi ratio cognitioque naturae; Efficiens dici potest. Addidisti ad extremum etiam indoctum fuisse. Optime, inquam.Polycratem Samium felicem appellabant. Summus dolor plures dies manere non potest? Beatus sibi videtur esse moriens. Non laboro, inquit, de nomine. Quid censes in Latino fore? 
    </p> 
    <br> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tubulo putas dicere? 
    </p> 
    <br> 
    <h3>Click here for more information.</h3> 
    </div> 

    <div class="slide" id="s3"><h4><span class="plus ind">+</span><span class="minus ind">-</span> Title</h4></div> 
    <div class="content" id="c3"> 
     <p> 
      Sequitur disserendi ratio cognitioque naturae; Efficiens dici potest. Addidisti ad extremum etiam indoctum fuisse. Optime, inquam.Polycratem Samium felicem appellabant. Summus dolor plures dies manere non potest? Beatus sibi videtur esse moriens. Non laboro, inquit, de nomine. Quid censes in Latino fore? 
     </p> 
     <br> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tubulo putas dicere? 
     </p> 
     <br> 
     <h3>Click here for more information.</h3> 
    </div> 

</div> 

這裏的腳本：

$(document).ready(function() { 
     $('h4').click(function() { 
      $(this).parent().next().slideToggle() 
      .siblings('.content').slideUp(); 
      $('.ind').toggle(this).nextAll().preventDefault(); 
     }); 
    }); 

我一直停留在這個相當長一段時間，這樣的幫助將不勝感激。

Answer 1

假設如果內容是slideupplus+應該顯示，如果內容是slidedown，所以默認顯示+和內容是隱藏minus-應該顯示。

- 截至添加以下HTML：

<style> 
     .ind.plus{ 
     display:inline; 
     } 

     .ind.minus{ 
     display: none; 
     } 

     .content{ 
     display: none; 
     } 
    </style> 

所以，你可以更新JS來控制你的indicators。

JS：

$(document).ready(function() { 
      $('h4').click(function() { 
       $(this).parent().next().slideToggle() 
       .siblings('.content').slideUp(); 

       $(this).find(".ind").toggle(); 

       $(this).parent().siblings('.slide').find('.ind.plus').show(); 
       $(this).parent().siblings('.slide').find('.ind.minus').hide(); 


      }); 
     }); 

Answer 2

這實際上比你自己做起來要容易得多。

在上述代碼中，您正在運行$(this).parent().next().slideToggle().siblings('.content').slideUp()。除了切換DOM中的下一個元素（相關的.content）之外，您還可以滑動所有的元素，包括所有的其他.content元素。因爲你只是想切換相關內容，你所需要做的就是找到下一個元素，然後slideToggle()那個;它總是會是一個.content元素。

您的第二行$('.ind').toggle(this).nextAll().preventDefault();似乎試圖從第一行「糾正」行爲，並且可以完全省略。

下面是更新後的代碼：

$(document).ready(function() { 
 
    $('h4').click(function() { 
 
    $(this).parent().next().slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="linkBox"> 
 
    <div class="slide" id="s1"> 
 
    <h4><span class="plus ind">+</span><span class="minus ind">-</span> POSitouch</h4> 
 
    </div> 
 
    <div class="content" id="c1"> 
 
    <p> 
 
     POSitouch is a cutting edge POS software designed for the Hospitality industry, and is the preferred solution among top operators because of the many features it provides. It is faster, easier and smarter than any other system available on the market 
 
     today and because of its adaptability with regards to most hardware platforms and mobile device. With POSitouch, there are no feature needs which can't be met, or POS operational challenges left unaddressed, which is why it receives the highest 
 
     recognition and client satisfaction ratings year over year. 
 
    </p> 
 
    <br> 
 
    <p> 
 
     Whether you are an independent restaurant or a national chain, bar or hotel, CCP will provide the Point of Sale (POS) system that can best adapt to your way of doing business and help your operation be more profitable and efficient. 
 
    </p> 
 
    <br> 
 
    <h3>Click here for more information.</h3> 
 
    </div> 
 

 
    <div class="slide" id="s2"> 
 
    <h4><span class="plus ind">+</span><span class="minus ind">-</span> DinerWare</h4> 
 
    </div> 
 
    <div class="content" id="c2"> 
 
    <p> 
 
     Used by thousands of restaurant owners, Diner Ware provides superior reliability and advanced technology for the budget conscious operator. 
 
     <p> 
 
     <br> 
 
     <p> 
 
      Diner Ware Point-of-Sale software is an essential tool which affords a lower cost of ownership. It streamlines your operation, and enables you to focus more on your customers. Its advanced capability and intuitive user interface makes it extremely simple 
 
      to use. 
 
     </p> 
 
     <br> 
 
     <h3>Click here for more information.</h3> 
 
    </div> 
 

 
    <div class="slide" id="s3"> 
 
    <h4><span class="plus ind">+</span><span class="minus ind">-</span> CCP Cloud</h4> 
 
    </div> 
 
    <div class="content" id="c3"> 
 
    <p> 
 
     Sequitur disserendi ratio cognitioque naturae; Efficiens dici potest. Addidisti ad extremum etiam indoctum fuisse. Optime, inquam.Polycratem Samium felicem appellabant. Summus dolor plures dies manere non potest? Beatus sibi videtur esse moriens. Non 
 
     laboro, inquit, de nomine. Quid censes in Latino fore? 
 
    </p> 
 
    <br> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tubulo putas dicere? 
 
    </p> 
 
    <br> 
 
    <h3>Click here for more information.</h3> 
 
    </div> 
 

 
</div>

需要注意的是，如果你想隱藏起來其他.content元素，它在默認情況下:)

是更完善的簡單 .hide()他們

希望這有助於！ :)