一次點擊後添加/隱藏div

我試圖在點擊後添加/隱藏潛水。現在，我可以添加一個div，當我點擊一個按鈕。然後，如果我點擊關閉，我可以刪除div。問題是我無法讀取div，如果我再次點擊一個按鈕而不重新加載頁面。就像這樣，如果我的潛水被移除，它就不會再出現。一次點擊後添加/隱藏div

這裏是我的代碼：

$('.close-div').on('click', function(){ 
 
$(this).closest("#closeme").remove(); 
 
});

<ul class="" role="tablist"> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsports" href="#vtab1" role="tab" data-toggle="tab"> Sports</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsante" href="#vtab2" role="tab" data-toggle="tab"> Santé</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublisharts" href="#vtab3" role="tab" data-toggle="tab"> Arts</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsci" href="#vtab4" role="tab" data-toggle="tab"> Sciences et technologies</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishgastro" href="#vtab4" role="tab" data-toggle="tab"> Gastronomie</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsocial" href="#vtab4" role="tab" data-toggle="tab"> Social</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish" href="#vtab4" role="tab" data-toggle="tab"> Autres</a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 

 
<div class="tab-content" id="closeme"> 
 
\t \t \t \t \t \t \t \t \t <div class="alert tab-pane fade" id="vtab1"> 
 
\t \t \t \t \t \t \t \t \t <div class="close-wrapper"> 
 
     <a href="#" class="close-div">Close</a> 
 
    </div> 
 
\t \t \t \t \t \t \t \t \t \t <h3 class="title">Sports</h3> 
 
\t \t \t \t \t \t \t \t \t \t <p>Trouvez des sportifs dans l'âme sur Benevolo pour vous aider dans vos tournois, compétitions.</p> 
 
\t \t \t \t \t \t \t \t \t </div>

有誰知道怎麼給你刪除後，重新進行添加一個div？我不知道如何更清楚/更精確？謝謝（我做了一些研究，但我沒有真正在js中編碼，所以我不能處理很多代碼......）！

來源

2015-11-25 user3163600

_「能夠加入一個div當我點擊一個按鈕。「_可以包含'js'的部分，其中'div'被添加到'document'的問題？ – guest271314

你的邏輯有問題！ 「關閉」按鈕位於隱藏onclick事件的div內部。所以，如果你點擊它，你只是不能再次點擊它（因爲它將被隱藏）和事件將不會被解僱，再次顯示它！

所以，一個解決方案是當其他按鈕被點擊時顯示div。

Your code working

的JavaScript

$('.btn').on('click',function() { 
    debugger; 
    var div = $("#closeme"); 
    div.css('display', 'block'); // it shows 
}); 

$('.close-div').on('click', function() { 
    var div = $("#closeme"); 
    div.css('display', 'none'); // it hides 
});

或者你可以只使用隱藏和顯示功能「HC_」用戶說：

$('.btn').on('click',function() { 
    debugger; 
    var div = $("#closeme"); 
    div.show(); 
}); 

$('.close-div').on('click', function() { 
    var div = $("#closeme"); 
    div.hide(); 
});

來源

2015-11-25 01:22:05

謝謝你，我解決了我的問題，我把你的答案和「HC_」混合在一起！再次感謝！ – user3163600

不客氣！） –

不要使用.remove();

使用.hide();和.show();

您還可以享受與.slideToggle();

來源

2015-11-25 00:54:41

你能指導我一點嗎？正如我所說的，我沒有學過js ... – user3163600

您也可以點擊使用.toggle()命令試驗。這是jQuery，我相信它可以很好地解決你的問題。

來源

2015-11-25 00:59:24

如何？：o因爲我說，我沒有傾斜js所以我我迷路了... – user3163600

試試這個

 <html> 
     <head> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     </head> 
     <body> 
     <script> 
    jQuery(document).ready(function(){ 
    jQuery('#close').on('click', function(event) {   
     jQuery('#closeme').toggle('hide'); 
      }); 
    }); 
    </script> 



     <div class="tab-content" id="closeme" name="closeme" > 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsports" href="#vtab1" role="tab" data-toggle="tab"> Sports</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsante" href="#vtab2" role="tab" data-toggle="tab"> Santé</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublisharts" href="#vtab3" role="tab" data-toggle="tab"> Arts</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsci" href="#vtab4" role="tab" data-toggle="tab"> Sciences et technologies</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishgastro" href="#vtab4" role="tab" data-toggle="tab"> Gastronomie</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsocial" href="#vtab4" role="tab" data-toggle="tab"> Social</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish" href="#vtab4" role="tab" data-toggle="tab"> Autres</a></li> 
     </div> 
     <div class="alert tab-pane fade" id="vtab1"> 
     <div class="close-wrapper"> 

     </div> 
     <input type='button' id="close" name="close" value='hide/show'> 
     <h3 class="title">Sports</h3> 
     <p>Trouvez des sportifs dans l'âme sur Benevolo pour vous aider dans vos tournois, compétitions.</p> 
     </div> 
     </body> 
     </html>

來源

2015-11-25 01:32:09

試試這個其工作正常，並告訴我，如果有任何問題 –

你應該隱藏它，但不能刪除div –

@ user3163600，你有沒有試過這個代碼？ –

一次點擊後添加/隱藏div

回答

相關問題