jquery - 单击某一元素时如何让多个元素改变行为

我正在开发一个 Rails 项目，对于宽度小于 1024px 的设备，我希望在单击菜单切换器时隐藏标题下方的内容。这是我的 application.html.erb 文件中的内容:

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>
  </head>

  <body>
    <%= render 'layouts/navbar' %>  
    <div class="container-fluid">
      <%= yield %>
    </div>
    <%= render 'layouts/footer' %>
  </body>
</html>

我的标题结构如下:

<header>
  <%= image_tag('logo.png', alt: 'logo', class: 'small_device_image') %>
  <nav class="site-nav">
    <ul class="menu">
      <%= image_tag('logo.png', alt: 'logo', class: 'style_image') %>
      <li>
        <%= link_to root_path do %>
          <h6>Home</h6>
        <% end %>
      </li>
      <li>
        <%= link_to "pages/our-programmes" do %>
          <h6>Our Programmes</h6>
        <% end %>
      </li>
      <li>
        <%= link_to "pages/about-us" do %>
          <h6>About Us</h6>
        <% end %>
      </li>
      <li>
        <%= link_to new_contact_path do %>
          <h6>Contact Us</h6>
        <% end %>
      </li>
    </ul>
  </nav>

  <div class="menu-toggle">
    <div class="hamburger"></div>
  </div>
</header>

下面是附带的 scss:

header {
  width: 100%;
  margin: 0 auto;
  background: $blue;
  color: $white;
  padding: 1em 0;
  position: relative;
}

header::after {
  content: "";
  clear: both;
  display: block;
}

.small_device_image {
  background-color: $white;
  border-radius: 3px;
  position: absolute;
  top: 1.5em;
  left: 2em;
}

.site-nav {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
  background: $white;
  clip-path: circle(0% at top);
  transition: clip-path ease-in-out 700ms;
  .menu {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

.style_image {
  background-color: $white;
  border-radius: 3px;
}

.site-nav-open {
  clip-path: circle(150% at top);
}

.site-nav .menu li {
  border-bottom: 1px solid $dark-blue;
  a {
    text-decoration: none;
    background-color: $yellow;
    color: $blue;
    display: block;
    text-transform: uppercase;
    font-family: $primary-font;
    padding: 2em 4em;
    &:hover {
      background-color: indianred;
      color: gold;
    }
  }
}

.site-nav .menu li:last-of-type {
  border-bottom: none;
}

.menu-toggle {
  padding: 1em;
  position: absolute;
  top: 1.2em;
  right: .75em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: $bright-white;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger{
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
} 

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}


@media only screen and (min-width: 320px) and (max-width: 1023px) {
  header {
    height: 75px;
    z-index: 1;
  }
  .style_image {
    display: none;
  }
  .site-nav .menu {
    height: calc(100vh - 155px);
    li {
      position: relative;
      height: 25%;
      a {
      height: calc(((100vh - 155px) / 4) - 1px);
      padding: 0;
      }
      h6 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

@media only screen and (min-width: 1024px) {
  .small_device_image {
    display: none;
  }
  .menu-toggle {
    display: none;
  }
  .photo {
    display: none;
  }
  .site-nav {
    height: auto;
    position: relative;
    background-color: transparent;
    float: right;
    clip-path: initial;
    .menu li {
      display: inline-block;
      border: none;
      a {
        color: $white;
        background: transparent;
        padding: 0;
        margin-left: 2em;
        &:hover {
          background-color: transparent;
        }
      }
    }
  }
}

我在 application.js 文件中添加了一些 jQuery。然而，它并没有隐藏类“container-fluid”的 div 中的内容。我想要的是，当单击菜单切换器时，容器流体类中的内容消失，并在关闭菜单时出现(我希望这是有意义的:)):

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .

$(document).ready(function() {
    $('.menu-toggle').click(function() {
        $('.site-nav').toggleClass('site-nav-open');
        $(this).toggleClass('open');
    });
});
$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('.container.fluid').hide();
  })
});

我知道我输入了很多代码，但可能没有意义。如果有人可以提供任何帮助，我将非常感激。

最佳答案

我没有运行 Rails，因此确定您的确切问题有点困难。

jQuery您编写的代码可以工作，但是您的代码中有一个拼写错误:尝试在 jQuery 中将“.container.fluid”替换为“container-fluid”看看是否可以解决问题。

编辑:

要切换 .container-fluid 元素的可见性，这应该有效:

$(document).ready(function() {
    $('.menu-toggle').click(function() {
        $(this).toggleClass('open');
        $('.site-nav').toggleClass('site-nav-open');
        $('.container-fluid').toggleClass('active');
    });
});

使用附加 CSS:

.active {
  display: none;
}

希望这有帮助!

$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('.site-nav').toggleClass('site-nav-open');
    $(this).toggleClass('open');
  });
});
$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('.container-fluid').hide();
  })
});

header {
  width: 100%;
  margin: 0 auto;
  background: $blue;
  color: $white;
  padding: 1em 0;
  position: relative;
}

header::after {
  content: "";
  clear: both;
  display: block;
}

.small_device_image {
  background-color: $white;
  border-radius: 3px;
  position: absolute;
  top: 1.5em;
  left: 2em;
}

 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: max-content;
  }

.site-nav {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
  background: $white;
  clip-path: circle(0% at top);
  transition: clip-path ease-in-out 700ms;
}

.style_image {
  background-color: $white;
  border-radius: 3px;
}

.site-nav-open {
  clip-path: circle(150% at top);
}

.site-nav .menu li {
  border-bottom: 1px solid $dark-blue;
  a {
    text-decoration: none;
    background-color: $yellow;
    color: $blue;
    display: block;
    text-transform: uppercase;
    font-family: $primary-font;
    padding: 2em 4em;
    &:hover {
      background-color: indianred;
      color: gold;
    }
  }
}

.site-nav .menu li:last-of-type {
  border-bottom: none;
}

.menu-toggle {
  padding: 1em;
  position: absolute;
  top: 1.2em;
  right: .75em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: $bright-white;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}

@media only screen and (min-width: 320px) and (max-width: 1023px) {
  header {
    height: 75px;
    z-index: 1;
  }
  .style_image {
    display: none;
  }
  .site-nav .menu {
    height: calc(100vh - 155px);
    li {
      position: relative;
      height: 25%;
      a {
        height: calc(((100vh - 155px) / 4) - 1px);
        padding: 0;
      }
      h6 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

@media only screen and (min-width: 1024px) {
  .small_device_image {
    display: none;
  }
  .menu-toggle {
    display: none;
  }
  .photo {
    display: none;
  }
  .site-nav {
    height: auto;
    position: relative;
    background-color: transparent;
    float: right;
    clip-path: initial;
    .menu li {
      display: inline-block;
      border: none;
      a {
        color: $white;
        background: transparent;
        padding: 0;
        margin-left: 2em;
        &:hover {
          background-color: transparent;
        }
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<header>
    <nav class="site-nav">
      <ul class="menu">
        <%= image_tag('logo.png', alt: 'logo', class: 'style_image') %>
          <li>
            <%= link_to root_path do %>
              <h6>Home</h6>
              <% end %>
          </li>
          <li>
            <%= link_to "pages/our-programmes" do %>
              <h6>Our Programmes</h6>
              <% end %>
          </li>
          <li>
            <%= link_to "pages/about-us" do %>
              <h6>About Us</h6>
              <% end %>
          </li>
          <li>
            <%= link_to new_contact_path do %>
              <h6>Contact Us</h6>
              <% end %>
          </li>
      </ul>
    </nav>

    <div class="menu-toggle">
      <div class="hamburger">V</div>
    </div>
</header>

关于jquery - 单击某一元素时如何让多个元素改变行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46749070/

jquery - 单击某一元素时如何让多个元素改变行为

上一篇：jquery - 在 Bootstrap 设置中悬停时使用 jQuery 删除某个类

下一篇：jquery - 首次单击后取消绑定(bind)元素的单击事件，并在 angularjs 中执行操作后重新绑定(bind)它