Question

我想扩大＆amp;崩溃div。为此，我使用： -

<ul class="link">
    <li>main link 1<span>[-]</span>
        <ul class="inner_div" style="display:block">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>
<ul class="link">
    <li>main link 2<span>[+]</span>
        <ul class="inner_div">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>
 <ul class="link">
    <li>main link 3<span>[+]</span>
        <ul class="inner_div">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>
 <ul class="link">
    <li>main link 4<span>[+]</span>
        <ul class="inner_div">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>

脚本是： -

$('.link span').click(function(){
$(".inner_div").hide();
var $ul = $(this).next();
$(this).html( $ul.is(':visible') ? '[+]' : '[&ndash;]');
$ul.slideToggle();

});

Css是： -

.inner_div{ display:none; }
.link span { float: right; cursor: pointer; }

它有效但当我再次点击展开div时，它应该隐藏。但它并不隐藏。还有一个问题是加号减号无法正常工作。

Answer 1

执行$(".inner_div").hide()时，您也隐藏了当前打开的内容。稍后当您说$ul.slideToggle()时，它会重新打开内容（因为它现在已隐藏）。

将其更改为：

$('.link span').click(function () {
    var $ul = $(this).next();
    $(".inner_div").not( $ul ).hide();
    $( '.link span' ).html( '[+]' );
    if( !$ul.is( ':visible' ) ) {
        $( this ).html( '[&ndash;]');
    }
    $ul.slideToggle();
});

这也将解决+/-问题。

演示：http://jsfiddle.net/S7MjY/2/

作为旁注：不要硬编码HTML中最初打开的菜单。而是让所有菜单项开始相同，并使用JavaScript打开默认菜单项。

展开/折叠不正常

1 个答案: