Question

我的网站导航中有一个状态信息栏（.nav-infobar__container），当.active时，必须改变它的位置和减少另一个分开 div（#s_body）。

但是，只有部分功能正常工作 - 状态栏的位置正在改变，但另一个div的宽度保持不变。

我尝试了以下 CSS ：

div#s_body{
    position: fixed;
    top: 48px;
    left: 270px;
    width: calc(100% - 270px);
    height: calc(100% - 48px);
    transition: width 213ms;
    z-index: 1;
    overflow: auto;
}
.nav-infobar__container.active div#s_body{ // should be affecting #s_body
    width: calc(100% - 650px);
    overflow: hidden;
}
.nav-infobar__container{
    position: fixed;
    top: 48px;
    right: -380px;
    width: 379px;
    height: calc(100% - 48px);
    transition: right 213ms;
}
.nav-infobar__container.active{
    right: 0px;
}

但无济于事。我希望 JavaScript 成为最后的手段，因为我不想在此处添加更多，并且已经相当大的 JS 网站。

这是我正在使用的（简化的）降价：

<!-- navigation !-->
<div class="navigation-container">
    <div class="nav-infobar__container">
        <div class="nav-infobar__outer-content">
            <!-- some content !-->
        </div>
    </div>
</div>
<!-- body !-->
<div id="s_body"> <!-- this div should be decreasing in width, but isn't !-->
    <div class="main__fixed-container">
        <!-- some content !-->
    </div>
</div>

我对所有东西进行了三重检查，一切看起来都很好（就像我以前做过的那样）;所以我很困惑，此时此刻。

感谢所有帮助！谢谢:)）

Answer 1

问题

在目前的形式中，您的CSS没有按照您的期望行事。当.nav-infobar__container.active div#s_body为div的孩子时，s_body会定位.nav-infobar__container .nav-infobar__container active，而div#s_body也有.nav-infobar__container类。

修复

目前没有CSS选择器允许您从active定位.navigation-container，因为他们不是兄弟姐妹，因此需要将.nav-infobar__container.active div#s_body课程添加到.navigation-container.active+div#s_body代替。您可以通过进行以下更改来在CSS中获得所需的结果：

将+更改为div#s_body。此规则使用相邻的兄弟（.navigation-container）选择器定位$(".navigation-container").on("click", function() { $(this).toggleClass("active"); });

div#s_body {
  position: fixed;
  top: 48px;
  left: 270px;
  width: calc(100% - 270px);
  height: calc(100% - 48px);
  transition: width 213ms;
  z-index: 1;
  overflow: auto;
  background: red;
}

.navigation-container.active+div#s_body {
  width: calc(100% - 650px);
  overflow: hidden;
  background-color: green;
}

.nav-infobar__container {
  position: fixed;
  top: 48px;
  /*right: -380px;*/
  width: 379px;
  height: calc(100% - 48px);
  transition: right 213ms;
  background: blue;
  height: 200px;
}

.nav-infobar__container.active {
  right: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- navigation !-->
<div class="navigation-container">
  <div class="nav-infobar__container">
    <div class="nav-infobar__outer-content">
      <!-- some content !-->
    </div>
  </div>
</div>
<!-- body !-->
<div id="s_body">
  <!-- this div should be decreasing in width, but isn't !-->
  <div class="main__fixed-container">
    <!-- some content !-->
  </div>
</div>

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
    <div class="row">
        <div class="advanced_filt" id="adv">
            <div class="advanced_filter">
            <span>Advanced Filter Menu</span>
          </div>
      </div>

      <div class="main-section" id="main">
            <a href="#" id="showHide">Hide / Show Advanced Filter</a>
            <div class="search_list">

          </div>
      </div>
  </div>
</div>
  </body>

</html>

＆＃13;

.advanced_filt{
  width : 25%;
  display : inline-block;
  float : left;
}
.main-section{
  width : 75%;
  display : inline-block;
  float : left;
}
.advanced_filter {width:100%; height:500px; background:red;}
.advanced_filter span {color:#fff; position:relative; top:50%; width:100%;}
.search_list {width:100%; height:500px; background:yellow;}

＆＃13;

div类应该是

1 个答案:

问题

修复