Question

当按钮出现时，我的div较短。我认为在我提供的示例中效果很好。当用户更改窗口的大小时，就会出现问题。我想我应该使用调整大小功能。实际上，当按钮不可见时，它可以按我的要求工作。但是我不知道如何使用调整大小以及同时显示和消失按钮的功能。

（我知道使用flex或calc会很容易，但是我需要使用较旧的浏览器）

// at the beginning:
var centerWidth1 = $('#wrap').width();
var centerWidth2 = $('#wrap').width() - 55; /*50+5*/
$(".center").css('width', centerWidth1);

// when I move the window: (it does not work)
$(window).resize(function() {
  //centerWidth3 = $('#wrap').width();
  //$(".center").css('width', centerWidth3);
});

// make the button appear
$(".center").click(function(e) {
  e.stopPropagation();

  $(this).animate({
    width: centerWidth2
  }, 400);
  
  $('.center').not(this).animate({
    width: centerWidth1
  }, 400);

  $(this).siblings(".right").delay(400).fadeIn("slow");
  $('.center').not(this).siblings(".right").fadeOut(0);
});

// click outside
$(document).click(function() {
  $('.right').fadeOut(200);
  $('.center').delay(200).animate({
    width: centerWidth1
  }, 400);
});

#wrap {
  position: relative;
  margin: 20px auto;
  width: 80%;
  background-color: red;
}

.row {
  position: relative;
  height: 30px;
  margin-bottom: 10px;
}

.center {
  float: left;
  min-height: 30px;
  line-height: 30px;
  display: inline-block;
  text-align: center;
  background-color: blue;
}

.right {
  float: left;
  width: 50px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  text-align: center;
  margin-left: 5px;
  border: 0;
  background-color: grey;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="wrap">
  <div class="row">
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
  <div class="row">
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</div>

Answer 1

必须进行一些更改，但是我认为它应该现在可以正常工作。我没有更改按钮单击处理程序中的任何内容。让我知道你是否有疑问。

// Define the global variables, so we can reuse them in functions
var centerWidth1;
var centerWidth2;

// Get the wrap and save in variable, so it doesn't get fetched on each resize event
var wrap = $('#wrap')

// call the function on pageload AND on resize
$(window).on('load resize', function() {
  centerWidth1 = wrap.width();
  centerWidth2 = wrap.width() - 55; /*50+5*/

  // jQuery's .css supports functions, so we can set different widths when the window is resized and the button is visible
  $(".center").css('width', function(){
    if ($(this).siblings('.right').css('display') === 'block') {
      return centerWidth2
    } else {
      return centerWidth1
    }
  });
});

$(window).trigger('resize'); // if you call this inside a load event, you may need to trigger the resize event so the function is called immediately


/* --------- didn't change the rest down here ---------- */
// make the button appear
$(".center").click(function(e) {
  e.stopPropagation();

  $(this).animate({
    width: centerWidth2
  }, 400);

  $('.center').not(this).animate({
    width: centerWidth1
  }, 400);

  $(this).siblings(".right").delay(400).fadeIn("slow");
  $('.center').not(this).siblings(".right").fadeOut(0);
});

// click outside
$(document).click(function() {
  $('.right').fadeOut(200);
  $('.center').delay(200).animate({
    width: centerWidth1
  }, 400);
});

JSFiddle：https://jsfiddle.net/burx60dn/4/

调整窗口大小。调整宽度条件

1 个答案: