Javascript 如何制作多个按钮，显示手机点击时隐藏的内容

按钮显示相应的

Cont

，当您单击离开或单击按钮时，该按钮将隐藏。它在电脑上工作得很好，但我希望它也能在手机上工作。 我有这样的想法：

<div id="body">
 <div id="footer-menu">
   <a class="BB11 BottomButton" data-toOpen="Cont11">Button1</a>
   <a class="BB12 BottomButton" data-toOpen="Cont12">Button2</a>
   <a class="BB13 BottomButton" data-toOpen="Cont13">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>
</div>

.ContIn{display: none;width:30px;height:20px;backgrond-color:red;}
#body{width:300px;height:200px;backgrond-color:#667;}

---

问题是它不能在手机上工作。我已经在Galaxy Ace 4上对其进行了测试。

您可以使用更好的方法使用数据属性，如：

$（.BottomButton”）。在（“单击”上，函数（e）{
e、 停止传播（）；
$（'.ContIn'）.hide（）；
$（'#Cont'+$（this.attr（'data-for'））.show（）；
});
.ContIn{display:none；}

按钮1
按钮2
按钮3

一些内容
另一内容
单独内容

$（函数（）{
$（“#页脚菜单a”）。在（“单击”上，函数（e）{
e、 停止传播（）；
var count=$（this.index（）；
//隐藏所有元素。toggleClass（'CountIn'）
var elem=$（“.Cont”）.get（计数）；
jQuery（'.Cont'）.hide（）；
jQuery（elem.show（）；
})
$（“#内容”）。在（“单击”上，函数（e）{//检查单击
e、 停止传播（）；
//隐藏所有元素
$（“.ContIn”）.fadeOut（）；
})
})
.ContIn{display:none；}

按钮1
按钮2
按钮3
部分内容1
部分内容2
部分内容3
当单击其他按钮时，此代码不会隐藏内容现在没有单击离开事件。当您在内容外部单击时，内容必须隐藏自己。顺便说一句，我需要点击以外的目标是整个页面100%的宽度和高度的腐蚀性伴侣我做了梅斯塔克。我使用了
数据打开
而不是
@Qriyo的
数据。如果答案能够解决您的问题，请进行投票和/或批准答案，以便对社区有所帮助。.点击离开事件在哪里？我需要的内容被隐藏，当你点击外面。
$(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();
  })
})