Question

我有两个或更多按钮显示一些内容。当我点击按钮或点击其他两个按钮时，我想点击#Cont11按钮并隐藏.BB11时会显示#Cont11。其余的同样如此。当我点击某个按钮并点击时，我设法实现了显示/隐藏，但当内容显示时，当我点击另一个按钮时，窗口不会隐藏。它需要在移动设备上工作。

<div id="footer-menu">
  <a class="BB11 BottomButton">Button1</a>
  <a class="BB12 BottomButton">Button2</a>
  <a class="BB13 BottomButton">Button3</a>
</div>
<div id="Content">
  <div id="Cont11" class="ContIn">Some content</div>
  <div id="Cont12" class="ContIn">Some content</div>
  <div id="Cont13" class="ContIn">Some content</div>
</div>

的CSS：

.ContIn{display: none;}

JS：

$(".BB11").click(function(e){
    $(".showing").fadeOut(300);
    $("#Cont11").fadeIn(300);         //toggle the window
    $("#Cont11").toggleClass("showing");
    $(this).toggleClass("highlighted");
    e.stopPropagation();                   //prevent event propagation
});
$(document).click(function(){
    $("#Cont11").fadeOut(300);           //hide the window
    $("#Cont11").toggleClass("showing");
    $(".BB11").removeClass("highlighted");
});
$("#Cont11").click(function(e){
    e.stopPropagation();                   
});
/*------------------------------------*/
$(".BB12").click(function(e){
    $(".showing").fadeOut(300);
    $("#Cont12").fadeIn(300);
    $("#Cont12").toggleClass("showing");
    $(this).toggleClass("highlighted");
    e.stopPropagation();
});
$(document).click(function(){
    $("#Cont12").fadeOut(300);
    $("#Cont12").toggleClass("showing");
    $(".BB12").removeClass("highlighted");
});
$("#Cont12").click(function(e){
    e.stopPropagation();                   
});
/*------------------------------------*/
$(".BB13").click(function(e){
    $(".showing").fadeOut(300);
    $("#Cont13").fadeIn(300);
    $("#Cont13").toggleClass("showing");
    $(this).toggleClass("highlighted");
    e.stopPropagation();
});
$(document).click(function(){
    $("#Cont13").fadeOut(300);
    $("#Cont13").toggleClass("showing");
    $(".BB13").removeClass("highlighted");
});
$("#Cont13").click(function(e){
    e.stopPropagation();                   
});

Answer 1

使用＆＃34;数据 - ＆＃34;属性和每个按钮只有几个类，这将帮助您减少所写的所有脚本行。这是你的小提琴。这将简化一切，只是一种适用于所有按钮的方法。如果您希望内容在点击时消失，我假设您正在尝试创建模态。因为如果您检查＆＃34;文档＆＃34;它将禁用所有其他可点击元素。因此，在文档上方放置一个叠加层，但在内容后面并检查其中的点击次数。

https://jsfiddle.net/tbd5e8cf/1/

$(function(){
    $(".BottomButton").on("click", function(e){
    e.stopPropagation();

    // HIDE ALL ELEMENTS 
    $(".ContIn").fadeOut(); // IF YOU LIKE USE removeClass(); INSTEAD hide(); FOR YOUR CUSTOM CSS.

    // SHOW THE RELATED CONTENT TO THIS BUTTON
    var cont = $(this).attr("data-toOpen");
    console.log(cont);
    $("#"+cont).fadeIn(); // IF YOU LIKE USE show(); INSTEAD fadeIn(); FOR YOUR CUSTOM CSS.

  })

  $("#Content").on("click", function(e){//CHECK FOR CLICK 
    e.stopPropagation();
    // HIDE ALL ELEMENTS 
    $(".ContIn").fadeOut();
  })
})

如何使用按钮切换窗口并使用点击

1 个答案: