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

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ビンのリンクはこちら

于 2013-02-25T10:04:19.233 に答える
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 に答える
0

ここで出力を確認してください

.link span私はあなたの幅がメインリンク1の上にあるようにCSSを少し変更しました

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

<span align="right">[+]</span>CSSに変更があるため、alignタグも使用されます

こちらをチェック

于 2013-02-25T10:06:40.073 に答える