Question

我希望（＆＃34; .aboutPage＆＃34;）在点击（＆＃34; .about＆＃34;）时显示和隐藏。在开始时div正在显示。如何将hide（）与this一起合并，因为一旦页面加载它就不会被隐藏。请帮忙。我知道div没有大小或任何东西，我会在我全部三个工作之后这样做。

＆＃13;

.aboutPage {
  height: 50px;
  width: 50px;
  background-color: red;
}

＆＃13;

<div class="container">
  <h1 class="title">Name Goes Here</h1>
  <br>
  <div class="menu">
    <h1 class="about">About Me</h1>
    <h1 class="projects">Projects</h1>
    <h1>Contact Me</h1>
  </div>
  <div class="aboutPage"> Here it Is</div>
</div>

＆＃13;

Answer 1

您必须使用toggle方法才能显示或隐藏匹配的元素。

此外，您需要bind click个.about元素的事件处理程序。

在页面加载时隐藏div：$('.aboutPage').hide();

或使用css：

.aboutPage{
    display:none;
}

＆＃13;

$('.aboutPage').hide();
$('.about').click(function(){
  $('.aboutPage').toggle();
});

＆＃13;

.aboutPage{
    height: 50px;
    width: 50px;
    background-color: red;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      <div class="container">
        <h1 class="title">Name Goes Here</h1>
        <br>
        <div class="menu">
          <h1 class="about">About Me</h1>
          <h1 class="projects">Projects</h1>
          <h1>Contact Me</h1>
        </div>
        <div class="aboutPage"> Here it Is</div>
      </div>
    </body>

＆＃13;

Answer 2

您当然可以“使用”JQuery来执行此操作，但这不是必需的。

请参阅内联注释以获取解释（注意：我已将最后3个h1元素更改为p元素，因此它们将适用于此处的代码段窗口。）：

// Get references to DOM objects needed to work the problem:
var a = document.querySelector(".about");
var ap = document.querySelector(".aboutPage");

// Add a "click" event handler to the .about element
a.addEventListener("click", function(){
  
  // If .aboutPage is hidden, show it - otherwise hide it.
  // Do this by adding or removing the .hide class.
  if(ap.classList.contains("hide")){
     ap.classList.remove("hide");  
  } else {
    ap.classList.add("hide");
  }
});

.aboutPage{
    height: 50px;
    width: 50px;
    background-color: red;
}

.hide { display:none; }

<div class="container">
        <h1 class="title">Name Goes Here</h1>
        <div class="menu">
          <p class="about">About Me</p>
          <p class="projects">Projects</p>
          <p>Contact Me</p>
        </div>
        <div class="aboutPage hide"> Here it Is</div>
</div>

Answer 3

您可以使用jQuery切换隐藏元素的类。

$('.about').on('click',function() {
  $('.aboutPage').toggleClass('hide');
})

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 class="title">Name Goes Here</h1>
  <br>
  <div class="menu">
    <h1 class="about">About Me</h1>
    <h1 class="projects">Projects</h1>
    <h1>Contact Me</h1>
  </div>
  <div class="aboutPage"> Here it Is</div>
</div>

以下是你如何在香草JS中做到这一点

document.getElementsByClassName('about')[0].addEventListener('click',function() {
  document.getElementsByClassName('aboutPage')[0].classList.toggle('hide');
})

.hide {
  display: none;
}

<div class="container">
  <h1 class="title">Name Goes Here</h1>
  <br>
  <div class="menu">
    <h1 class="about">About Me</h1>
    <h1 class="projects">Projects</h1>
    <h1>Contact Me</h1>
  </div>
  <div class="aboutPage"> Here it Is</div>
</div>

隐藏/显示Div

3 个答案: