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部分。请查看这是否符合您的要求

JQuery切换加号和减号图标

2 个答案: