1

div親コンテナの外側の要素を使用してトグルするイベントを配置しようとすると問題が発生します。

spanタグを使用して、親要素の外側から同じ動作をターゲットにしようとしています。

どんな助けでも感謝します。

HTML:

<div class='toggle_parent'>
    <div class='toggleHolder'>
      <span class='toggler'>Open</span> 
      <span class='toggler' style='display:none;'>Close</span>
    </div>

    <div class='toggled_content' style='display:none;width:100%;height:400px;'>
        <h2>Hello This Is My Content Right Here</h2>
        <span class='toggler btn btn-large'>Close</span>      
    </div>
</div>



 <!-- I need this element to trigger from outside -->
 <span class="toggler btn btn-large btn-info">Gain Early Access</span>

Javascript:

$('.toggler').live('click',function(){
/*   $(this).parent().children().toggle();  //swaps the display:none between the two spans */
$(this).parent().parent().find('.toggled_content').slideToggle();  //swap the display of the main content with slide action

});
4

2 に答える 2

0

目的に合わせて例を修正しました。

<div id="container">
    <div>
        <div>
          <span class='open'>Open</span> 
          <span class='close' style='display:none;'>Close</span>
        </div>

        <div class='content' style='display:none;width:100%;height:400px;'>
            <h2>Hello This Is My Content Right Here</h2>
            <span class='close'>Close</span>      
        </div>
    </div>
    <!-- I need this element to trigger from outside -->
    <span class="toggle">Gain Early Access</span>
</div>

$(".toggle").click( function( ) {
    $(".content").slideToggle();
});
$(".open").click( function( ) {
    $(".content").slideDown();
});
$(".close").click( function( ) {
    $(".content").slideUp();
});
于 2012-11-14T08:28:42.020 に答える
0

グローバルな親 div を使用するだけです。

<div id="container">
    <div class='toggle_parent'>
        <div class='toggleHolder'>
          <span class='toggler'>Open</span> 
          <span class='toggler' style='display:none;'>Close</span>
        </div>

        <div class='toggled_content' style='display:none;width:100%;height:400px;'>
            <h2>Hello This Is My Content Right Here</h2>
            <span class='toggler btn btn-large'>Close</span>      
        </div>
    </div>


    <!-- I need this element to trigger from outside -->
    <span class="toggler btn btn-large btn-info">Gain Early Access</span>
</div>

そして、あなたはこれを行うことができます：

var container = $('#container');
container.on('click', '.toggler', function() {
    container.find('.toggleHolder .toggler').toggle();
    container.find('.toggle_content').slideToggle();
});

ちなみに、jQuery 1.7以上を使っている場合liveは非推奨です。http://api.jquery.com/live/を参照

于 2012-11-14T08:17:52.423 に答える