Question

我正在尝试检索元素sidebar的宽度，以将其与绝对值250px进行比较以调整我的菜单，但我不确定如何继续。

我需要知道我的菜单何时打开或关闭，以便在项目关闭时删除。很抱歉在开始时提供的小信息。

完整代码JS

$(document).ready(function() {

  function toggleSidebar() {
    $(".button").toggleClass("active");
    $(".sidebar").toggleClass("widthSidebarJs");
    $(".sidebar-item").toggleClass("active");
  }

  $(".button").on("click tap", function() {
    toggleSidebar();
  });

  var maxSizeSidebar = 250;
  var widthSidebar = $(".sidebar").innerwidth(); 

  function displayForXsSidebar(){
    if (widthSidebar < maxSizeSidebar){
      $(".displayForXs").toggleClass("displayXs");
   }
 }

  $(document).keyup(function(e) {
    if (e.keyCode === 27) {
      toggleSidebar();
    }
  });

});

Answer 1

正如我猜测，你需要在调整大小时添加/删除<link rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <div class="search-bar-wrapper container-fluid"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8 search-bar"> <span class="col-md-5 mag-name-field" contenteditable> </span> <input id="date" class="col-md-5 date-field datepicker fa fa-calendar open-datetimepicker" contenteditable/> <span class="col-md-2 btn-front">SEARCH</span> </div> <div class="col-md-2"></div> </div> </div> <script> $( "#date" ).datepicker(); </script> - 类。您可以尝试添加displayXs事件侦听器。

这样的事情：

resize()

但更好的方法是$(window).on('resize', function(){ if (widthSidebar < maxSizeSidebar){ $(".displayForXs").addClass("displayXs"); } else { $(".displayForXs").removeClass("displayXs"); } }) - @media中的查询。

Answer 2

在您当前的代码中，您的函数displayForXsSidebar()将不会运行。但很容易，尝试这个，删除功能..

$(document).ready(function() { // when document ready, we calculate the width, is better.
  var maxSizeSidebar = 250;
  var widthSidebar = $(".sidebar").outerWidth();

    alert('you widthSidebar value right now is ' + widthSidebar );

    if (widthSidebar < maxSizeSidebar){
      $(".displayForXs").addClass("displayXs");
    } else {
      $(".displayForXs").removeClass("displayXs");
    }
});

现场演示..

$(document).ready(function() {
  var maxSizeSidebar = 250;
  var widthSidebar = $(".sidebar").outerWidth();

    if (widthSidebar < maxSizeSidebar){
      $(".displayForXs").addClass("displayXs");
      alert('you widthSidebar value right now is ' + widthSidebar + ' so we add class displayXs');
    } else {
      $(".displayForXs").removeClass("displayXs");
      alert('you widthSidebar value right now is ' + widthSidebar + ' so we remove class displayXs');
    }

});

.sidebar {
width: 240px; /* Change width here to 260px if you want */
}
.displayXs { background: #000; color: #fff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="sidebar">
MY SIDEBAR</div>

<div class="displayForXs">
My displayForXs element
</div>

功能比较宽度元素

2 个答案: