Question

我编写了以下代码，用于隐藏和显示div，当点击不同的li对象时，一切正常，唯一的问题是我希望div例如隐藏第二次我点击之前点击的同一个li对象。 .. 我怎样才能做到这一点？

<script> 
                $(".col-md-1-5").on("click", function() {
                    $(".containerDays").css("display", "none"); $("#" + $(this).attr("data-iddiv")).css("display", "block");
                        });
        </script>
        <script>
                $(".col-md-2").on("click", function() {
                    $(".containerTickets").css("display", "none"); $("#" + $(this).attr("data-iddiv")).css("display", "block");
                        });
        </script>
        <script>
                $(document).on('click', function (e) {
                    if ($(e.target).closest("#clubAuswahl").length === 0) {
                        $(".containerDays").hide();
                    }
                });
        </script>
        <script>
                $(document).on('click', function (e) {
                    if ($(e.target).closest(".containerDays").length === 0) {
                        $(".containerTickets").hide();
                    }
                });
        </script>

Answer 1

你可以使用toggle（）;在第二次点击时隐藏元素（如果第一次使其可见）

喜欢这样

$(".col-md-1-5").on("click", function() {
  $(".containerDays").toggle(); 
  $("#" + $(this).attr("data-iddiv")).toggle();
});

或.slideToggle（）;添加一些漂亮的动画来隐藏/显示

Answer 2

如果第一次点击已经发生在给定元素上，您必须使用标志变量（类？）来跟踪：

$(".col-md-2").on("click", function() {
    if ($(this).hasClass("helper")){ //if my helper class is already there, this means firts click has already happended
      $(".containerTickets").css("display", "none"); 
      $("#" +  $(this).attr("data-iddiv")).css("display", "block");
      $(this).removeClass("helper");
    }else{ //otherwise, I add to my element the helper class
      $(".containerTickets").css("display", "block"); 
      $("#" +  $(this).attr("data-iddiv")).css("display", "none");
      $(this).addClass("helper");
    }
});

Answer 3

我希望这能解决你的问题。我会在某个时候提出详细的解释。现在享受和快乐编码！

编辑1： -

@Alva这个问题是因为，显示和隐藏的div，也是一个李。您只需要通过在选择器中提供7 li（isotope-item）的类来更新选择器。检查更新的代码。

＆＃13;

$(document).on('click','#clubAuswahl li.isotope-item',function(){
            var idToToggle = $(this).attr('data-iddiv');
            var self = this;
            $(self).closest('#clubAuswahl').find('li').each(function(){
            	var tempIdToHide = $(this).attr('data-iddiv');
            	if( this != self ){
            		$('#' +tempIdToHide).hide();
            	}
            })
        	$('#'+idToToggle).toggle();
        });

＆＃13;

在第二次点击li元素上隐藏Div

3 个答案: