Question

我做了一个jquery崩溃＆amp;扩展div。它的工作，但我遇到的问题只有[+]＆amp; span [ - ]是可点击的，但我希望li意味着<li>main link 1<span>[+]</span>可点击

  <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>

脚本是： -

 <script type="text/javascript"                  src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script>
 $('.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();
});
$(document).ready(function(){
$( '.link' ).first().click();
});
 </script>

css是： -

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

请帮帮我。

Answer 1

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>

jQuery代码

$('.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( '[&ndash;]');
  }
  $ul.slideToggle();
});

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

CSS代码

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

JS Bin链接here

Answer 2

试试这个：checkout updated fiddle here

 $(document).ready(function(){
    $('.link ul').hide();
    $('.link li').click(function () {
       ($('span', this).text() == '[+]') ? $('span', this).html('[-]') : $('span', this).html('[+]');
       $('> ul', this).slideToggle();
       $(this).parent().siblings().find('ul').slideUp();
       $(this).parent().siblings().find('span').html('[+]');
    });
    $('.link li').first().click();
});

和css应该是：

 .link li{cursor: pointer; }

Answer 3

Check Output Here

我稍微改变了CSS，使.link span的宽度位于主链接1

之上

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

同时使用了对齐标记<span align="right">[+]</span>因为CSS中有变化

Check Here

折叠＆amp;扩展div

3 个答案: