如何在不激活其余部分的情况下切换下拉部分的指示灯？

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()他们

希望这有助于！ :)