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/

Answer 2

请找到更新的小提琴
http://jsfiddle.net/v9Evw/349/

//$('li', parent).each(function() {

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

   // });

只有选定的部分会滑动而不是第1部分和第2部分。请查看这是否符合您的要求