Javascript (Resize when browser window is over 436px)

问题

I will try to explain in details what I want, since it's hard to explain how I want it to be. I've created a responsive website, where I want to show 3 boxes:

(Day 1 - Day 2 - Day 3)

See image how I want it to look

The issue (Try this and U will see what is my issue:

Resize the screen window to less then 436px (So u get the red boxes)
Then click on Day 2, which then opens the content of Day 2
Start to resize the browser (This will then close the box "Day 2" automatically. I dont want it to close when I resize.

The reason why I have created the resize, was for the desktop, so it was expanding all the boxes when seen on desktop.

MY CODE:

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

.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;
}
  
}

<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>

回答1:

Just add $menuItem.toggleClass( "bbottom2" ); to the .btop button and add also bbottom class to other ticket

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

<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="bbottom bbottom2">Price 99</div>
</div>

<div class="ticket">
    <div class="btop">Day 3</div>
    <div class="bbottom bbottom2">Price 149</div>
</div>

来源：https://stackoverflow.com/questions/40574616/javascript-resize-when-browser-window-is-over-436px

标签

javascript

jquery

resize

responsive