Question

我尝试创建响应式应用，所以我需要获得响应式div的宽度。我使用Jquery width（）方法来获取width的值。然而，问题是当我单击swift到另一个页面时，div变为不可见，而Jquery width（）返回负值而不是实际值。

以下是一个例子。当我转到菜单3并调整浏览器大小时，控制台会记录一个负值。

$(window).resize(function () {
  console.log($("#test").width());
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Dynamic Pills</h2>
    <p>To make the tabs toggleable, add the data-toggle="pill" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
    <ul class="nav nav-pills">
      <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <div class="container">
          <div class="row">
            <div class="col-sm-4" id="test" style="height:100px; background:red"></div>
            <div class="col-sm-4" style="height:100px; background:green"></div>
            <div class="col-sm-4" style="height:100px; background:yellow"></div>
          </div>
        </div>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
  </body>
</html>

我在jQuery: Get height of hidden element in jQuery，

中尝试过建议

jQuery - Get Width of Element when Not Visible (Display: None)

但这些解决方案对我的情况不起作用。谁能告诉我如何解决它？

Answer 1

它有效。测试检查jsfiddle

它从CSS获得width值。问题是col-sm-4不可见。所以它没有获得宽度值。

DEMO https://jsfiddle.net/princesodhi/v0gmge9r/

结果可以在console

中看到

//$(document).on("click",".nav-pills")
$(window).resize(function() {
  console.log($("#test").outerWidth());
});

.tab-content {
  position: relative;
}

#home:not(.in) {
  width: 100%;
  position: absolute;     
  display: block;
  visibility: hidden;
  opacity: 1;   
  z-index: 1; 
}

.tab-pane {
  position: relative;
  z-index: 2;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Dynamic Pills</h2>
    <p>To make the tabs toggleable, add the data-toggle="pill" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
    <ul class="nav nav-pills">
      <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <div class="container">
          <div class="row">
            <div class="col-sm-4" id="test" style="height:100px; background:red"></div>
            <div class="col-sm-4" style="height:100px; background:green"></div>
            <div class="col-sm-4" style="height:100px; background:yellow"></div>
          </div>
        </div>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
  </body>
</html>

当我调整窗口大小时，JQuery width（）返回负值

1 个答案: