javascript - 如何在不激活其余部分的情况下使下拉部分上的指示器切换？

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

假设plus+如果内容是 slideup 应该显示, 和 minus-如果内容是 slidedown 应该显示, 所以默认显示 +并且内容是隐藏的。

--通过在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();


            });
        });