Добавить/скрыть div после щелчка снова и снова

Я пытаюсь добавить/скрыть погружение после щелчка. На данный момент я могу добавить div, когда я нажимаю кнопку. Затем я могу удалить div, если я нажму на Close. Проблема в том, что я не могу прочитать 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>

Кто-нибудь знает, как readd в DIV после удалить его? Я не знаю, как быть более ясным/точным? Спасибо (я провел некоторое исследование, но на самом деле я не кодирую js, поэтому я не могу справиться с большим количеством кодов ...)!

источник

2015-11-25 user3163600

_ ", чтобы добавить div, когда я нажимаю на кнопку. "_ Может включать часть' js', где 'div' добавляется в' document' в вопросе? – guest271314

У вас возникла проблема с вашей логикой! Кнопка «закрыть» находится внутри div, которая скрывается в событии onclick. Итак, если вы нажмете на него, вы просто не сможете его снова щелкнуть (потому что он будет скрыт), и событие не будет выпущено, чтобы показать его снова!

Итак, решение заключается в отображении 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();

http://api.jquery.com/hide/

Вы также можете наслаждаться экспериментировать с .slideToggle();

источник

2015-11-25 00:54:41

Не могли бы вы немного мне помочь? Как я уже сказал, я не изучил js ... – user3163600

Вы также можете использовать команду .toggle() на мыши. Это jQuery, и я считаю, что это может хорошо решить вашу проблему.

источник

2015-11-25 00:59:24

Как?: O Как я сказал, что я не наклоняюсь, поэтому я потерялся ... – 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 после щелчка снова и снова

ответ

Смежные вопросы