单击元素时如何更改多个元素

时间：2017-10-14 20:33:13

标签： jquery ruby-on-rails

我正在开发一个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。但是，它并没有隐藏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();
  })
});

我知道我已经添加了很多代码，这可能没有意义。如果有人可以提供任何帮助，我将非常感激。

1 个答案:

答案 0 :(得分：2)

我没有运行rails，因此很难找出确切的问题。

您编写的jQuery代码有效，但是代码中有一个拼写错误：尝试将“.container.fluid”替换为jQuery中的“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>

相关问题
最新问题