javascript - 带有加号和减号图标的 JQuery 切换

Question

我有两个部分，即

1. section one

2. section two

我正在执行 JQuery 在两个 div 部分之间向上滑动和向下滑动，加号和减号变化..目前它工作得非常好我想在我的代码中做一个小的改变当我点击第二部分的第一部分内容是隐藏，反之亦然，我需要同时打开两者，有人可以帮助我实现它谢谢!

http://jsfiddle.net/v9Evw/348/

HTML

<ul id="toggle-view">
    <li >
        <h3 style='background:#4c97d0;color:#fff;'>Section one</h3>
        <span style='background:#4c97d0;color:#fff;' class='glyphicon glyphicon-plus'></span>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
    <br>
    <li>
        <h3 style='background:#4c97d0;color:#fff;'>section two</h3>
        <span style='background:#4c97d0;color:#fff;' class='glyphicon glyphicon-plus'></span>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
</ul>

JQUERY

var parent = $('#toggle-view'), // storing main ul for use below
    delay = 200; // storing delay for easier configuration

// bind the click to all headers
$('li h3, li span', parent).click(function() {

    // get the li that this header belongs to
    var li = $(this).closest('li');

    // check to see if this li is not already being displayed
    if (!$('p', li).is(':visible'))
    {
        // loop on all the li elements
        $('li', parent).each(function() {

            // slide up the element and set it's marker to '+' 
            $('p', $(this)).slideUp(delay);

        });

        // display the current li with a '-' marker
        $('p', li).slideDown(delay);

    }
    else {
        $('p', li).slideUp(delay);

    }
    $('span',li).toggleClass('glyphicon-plus glyphicon-minus');
});

Answer 1

删除更改所有内容区域状态的循环。您只想将其应用于选定的内容。

所以现在你是说；如果这是打开的，关闭它，否则打​​开它。

if (!$('p', li).is(':visible')) {

  $('p', li).slideDown(delay);

} else {

  $('p', li).slideUp(delay);

}

http://jsfiddle.net/v9Evw/350/