1

ボタンを使用して、1つのdivを閉じ、別のdivを同時に開くようにスライドしようとしています。これが私のdivコードです：

<div class='toggle_parent'>
    <div class='toggleHolder'>
        <p>Content here</p>
        <span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
    </div>
    <div class='toggled_content' style='display:none;'>
        <p>Hidden Content</p>
    </div>
</div>​

そして、jQueryは次のようになります。

$(document).ready(function(){

        $('.toggler').click(function() {
            $('.toggleHolder').slideUp().css('display', 'none')
            $('.toggled_conent').slideDown().css('display', '')
      });

    });​

私は脳が機能しなくなるほど多くのことを試みました。答えは「とても簡単に理解できたはずです」と思いますが、行き詰まっています。トグルを押すと、トグルされたコンテンツが表示され、toggleHolderが消えます。

前もって感謝します！

4

3 に答える 3

1

の代わりにjavascriptを使用して非表示のコンテンツを非表示にし、呼び出しstyleを取り除きます。.css

$(document).ready(function(){

    $('.toggled_content').hide();

    $('.toggler').click(function() {
        $('.toggleHolder').slideUp();
        $('.toggled_content').slideDown();
    });

});​

.toggled_contentまた、セレクターにタイプミスがありました。

これが動作中のJSFiddleです。

于 2012-11-22T19:30:44.547 に答える
0

これを試しましたか？

$('.toggler').click(function() {
        $('.toggleHolder').slideUp().hide();
        $('.toggled_conent').slideDown().show();
  });
于 2012-11-22T19:28:06.057 に答える
0

class name = "toggled_content"をdivとjqueryで別の名前に変更して、次のようにしてください。

jQuery

<script type="text/javascript">
$(document).ready(function(){

        $('.toggler').click(function() {
            $('.toggleHolder').slideUp().css('display', 'none');
            $('.haveOther').slideDown();
      });

    });
</script>

HTML

<div class='toggle_parent' style="background-color:#999;">
    <div class='toggleHolder'>
        <p>Content here</p>
        <span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
    </div>
    <div class='haveOther' style='display:none;'>
        <p>Hidden Content</p>
    </div>
</div>

これはあなたのために働くでしょう。

于 2012-11-22T20:02:02.017 に答える