如何定义此jQuery代码的if语句？

Question

我写了一个汉堡切换菜单。我想告诉这段代码在单击<div class="line1"></div>时隐藏<div class="line3"></div>和.menu。

我该怎么做？

$(function(){

  $('.menu').click(function(){
    $('.sidebar').toggle();
  });

});

.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
  position:relative;
}

.menu > div {
  background-color:black;
  width:22px;
  height:1px;
}

.line1 {
  top:12px;
  position:absolute;
}
.line2 {
  top:16px;
}
.line3 {
  top:22px;
}
.sidebar {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="menu">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
  
  
  
    <div class="sidebar">
        Sidebar
    </div>

Answer 1

使用jQuery .hide()

如果要再次显示它，请使用 .show() ，与使用 .hide()

的方法相同

转到以下链接以了解更多信息

隐藏： http://api.jquery.com/hide/

显示： http://api.jquery.com/show/

我在下面更新了您的代码段：

$(function(){

  $('.menu').click(function(){
    $('.sidebar').toggle();
    $(".line1").hide();
    $(".line3").hide();
  });

});

.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
  position:relative;
}

.menu > div {
  background-color:black;
  width:22px;
  height:1px;
}

.line1 {
  top:12px;
  position:absolute;
}
.line2 {
  top:16px;
}
.line3 {
  top:22px;
}
.sidebar {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="menu">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
  
  
  
    <div class="sidebar">
        Sidebar
    </div>

或者您可以使用 .toggle()

http://api.jquery.com/toggle/

$(function(){

  $('.menu').click(function(){
    $('.sidebar').toggle();
    $(".line1").toggle();
    $(".line3").toggle();
  });

});

.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
  position:relative;
}

.menu > div {
  background-color:black;
  width:22px;
  height:1px;
}

.line1 {
  top:12px;
  position:absolute;
}
.line2 {
  top:16px;
}
.line3 {
  top:22px;
}
.sidebar {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="menu">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
  
  
  
    <div class="sidebar">
        Sidebar
    </div>

Answer 2

如果要隐藏然后显示，请使用.toggle()，如下所示：

$(function(){

  $('.menu').click(function(){
    $('.sidebar').toggle();
    $(".line1").toggle();
    $(".line3").toggle();
  });

});

.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
  position:relative;
}

.menu > div {
  background-color:black;
  width:22px;
  height:1px;
}

.line1 {
  top:12px;
  position:absolute;
}
.line2 {
  top:16px;
}
.line3 {
  top:22px;
}
.sidebar {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="menu">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
  
  
  
    <div class="sidebar">
        Sidebar
    </div>