0

この jQuery スクリプトを使用して、ページ上の HTML コンテンツを含む 4 つの div コンテナーを非表示および表示しています。

jQuery:

$('.content-drawer').hide();
$('#tab1').show();
$('#calc').show();

$('.tab').click(function() {
var $this = $(this);
var target = $(this.rel);
$this.closest('li').addClass('active focus');
// Add the classes to the closest li of the clicked anchor

$('.tab').not($this).closest('li').removeClass('active focus');
// Remove the classes for the non-clicked items

$('.content-drawer').not(target).fadeOut();
// Slideup the other contents

target.delay(400).fadeToggle();
// Toggle the css3-mediaqueriesrrent content

if (target.is(':visible')) {
    // Only if the target is visible remove the active class
    $this.closest('li').removeClass('active');
} 
return false;
});

HTML:

<div class="content-drawer" id="tab2">
    <div class="sixcol">
       <img src="css/img/books.png" alt="">
    </div>
    <div class="sixcol last">
      <article>
           <h2>From our family to yours</h2>
           <p>Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
           <a class="button fancy" href="#">Learn More</a>
      </article>
   </div>
</div>

クライアントは、現在開いている div をクリックすると、画面に何も残さずに閉じてしまうという事実を考慮して、問題を抱えています。

必要なもの：開いているdivをクリックしても「閉じられない」ようにする

4

1 に答える 1

0

常に 1 つの div を表示できるようにする方法の 1 つは:visible 、jQuery にあるセレクターを使用することです。.tabコードを変更し、タグをクリックしたときにこれを追加しました

$('.content-drawer').hide();
$('#tab1').show();
$('#calc').show();

$('.tab').click(function() {
   var $this = $(this);
    var target = $(this.rel);

    //Get the number of .tabs visible
    var visible = $('.tab').filter(":visible").length;
    //If only one is visible then return before preforming any actions
    if(visible === 1){
        return; 
    }

    $this.closest('li').addClass('active focus');
    // Add the classes to the closest li of the clicked anchor

    $('.tab').not($this).closest('li').removeClass('active focus');
    // Remove the classes for the non-clicked items

    $('.content-drawer').not(target).fadeOut();
    // Slideup the other contents

    target.delay(400).fadeToggle();
    // Toggle the css3-mediaqueriesrrent content

    if (target.is(':visible')) {
        // Only if the target is visible remove the active class
        $this.closest('li').removeClass('active');
    } 
    return false;
});

お役に立てれば。

于 2013-05-10T03:13:48.357 に答える