Jquery 崩塌及；展开div

我制作了一个jquery折叠和扩展div。它可以工作，但我面临一个问题，即只有[+]&span[-]是可点击的，但我希望li表示

主链接1[+]

是可点击的

  <ul class="link">
  <li>main link 1<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 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>

---

请帮帮我。

HTML代码

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  <ul class="link">
  <li class="expan">main link 1<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 class="expan">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 class="expan">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 class="expan">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>

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

$(document).ready(function(){
    $('.expan').first().click();
});

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

CSS代码

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  <ul class="link">
  <li class="expan">main link 1<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 class="expan">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 class="expan">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 class="expan">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>

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

$(document).ready(function(){
    $('.expan').first().click();
});

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

JS Bin链接

我稍微更改了CSS，使

.link span

的宽度位于主链接1上

.link span {position:absolute; width:80%; float: right; cursor: pointer; margin-left: -20%;}

由于CSS中有更改，因此还使用了align标记

[+]

试试这个：

css应该是：

 .link li{cursor: pointer; }

---

这是一个jsbin演示，你能重写为主链接1[+]吗？另一种方法是为

指定一个唯一的类，并让您单击该类而不是“.link span”。如果我将其重写为主链接1[+]，则由于它的工作，我将失去该功能。但默认情况下，不显示第一个ul。请在这方面帮助我。谢谢它的工作。但默认情况下，不显示第一个ul。请帮我做这件事also@AnkitaAgrawal：编辑我的答案，请检查JS Bin。谢谢您的解决方案。我只更改$（document）.ready（函数（）{$（'.expan'）.first（）.click（）；}）；在上面的fiddle链接中试用。它工作不正常，当我们扩展一个div时，另一个div肯定会崩溃。我认为这会导致问题。展开一个div并尝试折叠相同的div。谢谢。但当我扩展另一个div时，它不会折叠div。现在我的问题解决了。谢谢你的回复。：）@Jai还没有，扩展一个分区，而不是扩展另一个分区。你可以在[+]和[-]中找到漏洞。上一个div符号在由其他div导致的折叠过程中未更改为[+]。