Question

我会尝试详细解释我想要的东西，因为很难解释我的想法。我创建了一个响应式网站，我想在其中显示3个框：

（第1天 - 第2天 - 第3天）

See image how I want it to look

问题（试试这个和U会看到我的问题：

将屏幕窗口调整为小于436px（所以你得到红色框）
然后点击第2天，然后打开第2天的内容
开始调整浏览器的大小（这将关闭框＆＃34;第2天和第34天; 自动。当我调整大小时，我不希望它关闭。

我创建调整大小的原因是桌面，所以它在桌面上看到时会扩展所有框。

我的代码：

＆＃13;

$(document).ready(function() {
        if($(window).width()<436)
      $('.bbottom2').hide();
      $('.btop').click(function(e) {
        e.preventDefault();
        var $menuItem = $(this).next('.bbottom, .bbottom2');
        $menuItem.slideToggle();
      });
 });
 
 
      $( window ).resize(function() {
        if($(window).width()>436) $('.bbottom, .bbottom2').show();
        else $('.bbottom2').hide();
      });

＆＃13;

.ticket{
  margin:0;
  padding:0;
  float:left;
}

.btop2, .btop{
  background-color:grey;
  color:white;
  padding:5px 10px;
  display:block;
  width:100px;
  border-bottom:1px solid;
  pointer-events:none;
}

.btop:hover{
  background-color:darkgrey;
}

/*Responsive*/
@media screen and (max-width: 436px) {

.ticket{
  margin:0;
  padding:0;
  float:none;
}

.btop{
  background-color:red;
  pointer-events:auto;
}
  
  

.btop:hover{
  cursor:pointer;
}
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ticket">
    <div class="btop">Day 1</div>
    <div class="bbottom">Price 20</div>
</div>

<div class="ticket">
    <div class="btop">Day 2</div>
    <div class="bbottom2">Price 99</div>
</div>

<div class="ticket">
    <div class="btop">Day 3</div>
    <div class="bbottom2">Price 149</div>
</div>

＆＃13;

Answer 1

只需将docker ps添加到$menuItem.toggleClass( "bbottom2" );按钮即可并将.btop类添加到其他票证

bbottom

$(document).ready(function() {
        if($(window).width()<436)
      $('.bbottom2').hide();
      $('.btop').click(function(e) {
        e.preventDefault();
        var $menuItem = $(this).next('.bbottom, .bbottom2');
        
        $menuItem.slideToggle();
        $menuItem.toggleClass( "bbottom2" );
      });
 });
 
 
      $( window ).resize(function() {
        if($(window).width()>436) $('.bbottom, .bbottom2').show();
        else $('.bbottom2').hide();
      });

.ticket{
  margin:0;
  padding:0;
  float:left;
}

.btop2, .btop{
  background-color:grey;
  color:white;
  padding:5px 10px;
  display:block;
  width:100px;
  border-bottom:1px solid;
  pointer-events:none;
}

.btop:hover{
  background-color:darkgrey;
}

/*Responsive*/
@media screen and (max-width: 436px) {

.ticket{
  margin:0;
  padding:0;
  float:none;
}

.btop{
  background-color:red;
  pointer-events:auto;
}
  
  

.btop:hover{
  cursor:pointer;
}
  
}

Javascript（浏览器窗口超过436px时调整大小）

1 个答案: