爲幾個點擊事件創建一個元素

我想創建一個帶有類的div（只有一個）。它給每個細節都展開一次打開，但每次點擊創建div ...爲幾個點擊事件創建一個元素

下面是HTML

<main> 
    <section> 
     <h3>title</h3> 

     <div> 
      <details> 
       <summary>sum1</summary> 
       content1 
      </details> 

      <details> 
       <summary>sum2</summary> 
       content2 
      </details> 
     </div> 

    </section> 
</main>

而且這裏的JS

$('.firstContent').hide(); 

$('details').click(function() { 
    $(this).toggleClass("openedDetails"); 
    $('details').not(this).removeAttr("open"); 
    $('details').not(this).removeClass("openedDetails"); 

    if ($('details').hasClass('openedDetails')) { 
     $('section h3').after('<div class="firstContent">content3</div>'); 
     $('.firstContent').show(); 
    } else { 
     $('.firstContent').hide(); 
    } 

});

編輯：使用toggleClass系統（我認爲這是一種更好的方式），.firstContent div直接在HTML中創建，位於h3和下一個div之間

$('.firstContent').hide(); 
$('main details').click(function(){ 
    var mainSelf = $(this); 
    $(mainSelf).toggleClass('openedDetails'); 
    $('details').not(mainSelf).removeAttr('open'); 
    $('details').not(mainSelf).removeClass('openedDetails'); 

    var mainParent = $(mainSelf).parents('main'); 
    mainParent.addClass('mainParent'); 
    $('main').not(mainParent).removeClass('mainParent'); 

    var openedFirst = $('.firstContent', mainParent); 
    openedFirst.addClass('openedFirst'); 
    $('.firstContent').not(openedFirst).removeClass('openedFirst'); 
    openedFirst.show(); 
    $('.firstContent').not(openedFirst).hide(); 

});

來源

2017-02-26 erin0

你爲什麼_creating_而不是切換其顯示的元素，？創建，銷燬，創建，銷燬等是DOM上的其他工作，並不是立即顯示出來的。 – Sampson

我知道如何使用toggleClass做到這一點，但想通過創建元素來嘗試，只是爲了提高我在jquery中的技能（這是我的一種體驗，感謝您的幫助;）） – erin0

道具給你試圖磨練你的技能;但是您採用的方法對於您正在開發的項目並不理想。只是我的兩美分 – Sampson

使用remove()而不是hide()，因爲基本上每添加一個新的firstContent div都不會刪除前一個。你只是它隱藏它。

$('.firstContent').hide(); 
 

 
$('details').click(function() { 
 
$('.firstContent').remove(); 
 
    $(this).toggleClass("openedDetails"); 
 
    $('details').not(this).removeAttr("open"); 
 
    $('details').not(this).removeClass("openedDetails"); 
 

 
    if ($('details').hasClass('openedDetails')) { 
 
     $('section h3').after('<div class="firstContent">content3</div>'); 
 
     $('.firstContent').show(); 
 
    } else { 
 
     $('.firstContent').remove(); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
    <section> 
 
     <h3>title</h3> 
 

 
     <div> 
 
      <details> 
 
       <summary>sum1</summary> 
 
       content1 
 
      </details> 
 

 
      <details> 
 
       <summary>sum2</summary> 
 
       content2 
 
      </details> 
 
     </div> 
 

 
    </section> 
 
</main>

來源

2017-02-26 18:57:00

代碼創建一個小故障 – 2017-02-26 18:58:15

@JoséphFlames你是什麼意思由'毛刺' ？ –

如果您運行片段內容3和內容1轉到div的外部並複製 – 2017-02-26 18:59:40

爲幾個點擊事件創建一個元素

回答

相關問題