2

さて、あなたは私がプログラマーではなくデザイナーであることがわかるでしょう、それで私と一緒にタフにならないでください。かなりうまく機能するトグルがありますが、単純な表示と非表示のスクリプトを起動できません。私はもっ​​と緩いです...問題は、トグル機能を備えたH4が独立してうまく機能するということです。ただし、2つのボタンを押して、すべてを表示および非表示にする必要もあります。

トグル効果 

$(function() {
    $('.toggle-item').each(function(ix, el) {

        $(this).addClass('inactive');
        var contentDiv = $('.toggle-content', $(el));
        $(this).attr('data-height', contentDiv.outerHeight());
        contentDiv.css('overflow', 'hidden');
        contentDiv.height(0);
    });

    $(".toggle-item h4").click(function(){
        var $parent = $(this).parent('.toggle-item');
        if($parent.length) {
            if( $parent.hasClass('inactive') ) {
                $parent.removeClass('inactive');
                $('.toggle-content', $parent).height(           $parent.attr('data-height'));
            } else {
                $parent.addClass('inactive');
                $('.toggle-content', $parent).height( 0 );
            }
        }
    });
});

HTMLコード：

<div class="toggle-item">
    <h4>SOME TEXT AS HEADLINE</h4>
    <div class="toggle-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan, turpis facilisis ultricies consequat, tellus ligula sagittis libero, porttitor venenatis urna dui non quam. Fusce aliquam, libero sed eleifend pellentesque, ligula dolor porta neque, et egestas diam mauris id odio.</p>
    </div>
</div>

ボタン

<button id="show">Show All</button> 
<button id="hide">Hide All</button>

意図

$(document).ready(function(){
  $("#show").click( function() {
       $('.toggle-content').show();
  });
  $("#hide").click(function(){
       $('.toggle-content').hide();
  });
});

ここでは、実行中の例を見つけることができます。

ヒントは大歓迎です！TIA。

4

2 に答える 2

0

これが必要だと思います。スクリプトを次のように更新してみてください。

  $("#show").click( function() {
       $('.toggle-content').each(function(){
         // you need this because height goes to 0pt
         $(this).height('auto');
         $(this).show();
       });
  });
  $("#hide").click(function(){
       $('.toggle-content').each(function(){
         $(this).hide();
       });
  });

私はこれが役立つことを願っています

于 2012-08-10T09:39:31.093 に答える
0

さて、Tiendy.comのマヌエルセブリアン氏がトリックをやって来ます。

$(document).ready(function(){

  $("#show").click( function() {
       $('.toggle-item').each(function(i) {             
            $(this).removeClass('inactive');
            $('.toggle-content', this).height( $(this).attr('data-height'));
       });
  });

  $("#hide").click(function(){
       $('.toggle-item').each(function(i) {
            $(this).addClass('inactive');
            $('.toggle-content', this).height( 0 );
       });
  });

});

これにより、すべてが開閉します。開いたものの一部も閉じます。セブリアン氏に感謝します。これが誰かにもっと役立つことを願っています。みなさん、ありがとうございました。

于 2012-08-11T12:18:26.400 に答える