0

我做了一个 jquery 折叠和展开 div。它工作，但我面临一个问题，只有 [+] 和跨度 [-] 是可点击的，但我希望 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; }

请帮我。

4

3 回答 3

1

试试这个：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; }
于 2013-02-25T10:21:32.983 回答
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 链接在这里

于 2013-02-25T10:04:19.233 回答
0

在此处检查输出

我稍微改变了 CSS，这样你的宽度.link span就在主链接 1 上

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

也使用了对齐标签<span align="right">[+]</span>因为CSS有变化

在这里检查

于 2013-02-25T10:06:40.073 回答