Question

按钮显示当您单击或单击按钮时隐藏的相应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;}

并使用此脚本

$(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();
  })
})

问题在于它不适用于手机。我已经在Galaxy Ace 4上测试了它。

Answer 1

您可以使用类似数据属性的更好方法：

＆＃13;

$(".BottomButton").on("click", function(e){
  e.stopPropagation();
  $('.ContIn').hide();
  $('#Cont'+$(this).attr('data-for')).show();
});

＆＃13;

.ContIn{display: none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footer-menu">
  <a class="BB11 BottomButton" data-for="11">Button1</a>
  <a class="BB12 BottomButton" data-for="12">Button2</a>
  <a class="BB13 BottomButton" data-for="13">Button3</a>
</div>
<hr/>
<div id="Content">
  <div id="Cont11" class="ContIn">Some content</div>
  <div id="Cont12" class="ContIn">Another content</div>
  <div id="Cont13" class="ContIn">Separate content</div>
</div>

＆＃13;

我们在此处为每个<a>标记分配了一个数据属性：

data-for

它只是包含您要显示的内容ID的第二部分：11,12或13，这是您身份的一部分，即Cont11或Cont12

我们只需捕获click事件并使用$(this).attr('data-for');获取数据属性并显示div，如下所示：

$('#Cont'+$(this).attr('data-for')).show();

因此，如果您单击带有data-for的标签为11，那么将显示ID为Cont11的div。

Answer 2

user.valid_password?('12345678')

$(function(){
    $("#footer-menu a").on("click", function(e){
    e.stopPropagation();
    var count = $(this).index();
    
    // HIDE ALL ELEMENTS .toggleClass('CountIn')
    var elem = $(".Cont").get(count);
    jQuery('.Cont').hide();
    jQuery(elem).show();
    
  

  })

  $("#Content").on("click", function(e){//CHECK FOR CLICK 
    e.stopPropagation();
    // HIDE ALL ELEMENTS 
    $(".ContIn").fadeOut();
  })
})

.ContIn{display: none;}

请检查以上代码。它适用于n个元素。在此代码中，我只是获取我们点击的元素的索引，即<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="footer-menu"> <a class="BottomButton">Button1</a> <a class="BottomButton">Button2</a> <a class="BottomButton">Button3</a> </div> <div id="Content"> <div class="Cont ContIn">Some content 1</div> <div class="Cont ContIn">Some content 2</div> <div class="Cont ContIn">Some content 3</div> </div>，并将 toggleClass 添加到相对于指数（）

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

2 个答案: