如何在單擊另一個div時顯示div並在單擊同一div時隱藏它？

Question

我有一個有7個孩子的div，在懸停時有一個項目會更改背景和從中間離開的文字板。 我已經用CSS完成了。 現在我想當用戶單擊一個項目時它顯示另一個帶有JavaScript的div（.wrapper）。 如果用戶再次單擊，它將隱藏特定的div。 如何使用JavaScript實現此邏輯？

這是我的html片段

<div class="category">
    <div class="furniture">Furniture</div>
    <div class="tableware">Tableware</div>
    <div class="jewellery">Jewellery</div>
    <div class="shoes">Shoes</div>
    <div class="water_bottles">Water Bottles</div>
    <div class="clothes">Clothes</div>
    <div class="textiles">Fabric Patterns</div>
</div>

<div class="upload">
    <div class="wrapper">
        <div class="control"><img src="back.png"></div>
            <div class="content"></div>
            <div class="content_desc"></div>
            <div class="control"><img src="forward.png"></div>
        </div>
    </div>

CSS代碼

/*styles individual divs in the category class*/
.category > div:hover {
    cursor: pointer;
    transform-style: flat;
    animation-delay: 0.1s;
    display: flex;
    border: 1px 1px 1px 1px solid;
    background-color: #898488;
    color: #7AC4EE;
    border-left-color: yellow;
    box-sizing: border-box; 
}
/*class that i want to display on click*/
.wrapper {
    display: none;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: white;
    box-sizing: border-box;
    width: 623px;
    padding: 0;
    align-self: center;
    height: 100%;
    margin-bottom: auto;
    box-shadow:  0px 3px 7px 0px rgba(0,0,0,0.3);
}
/*the classes below are in .wrapper*/
.control {
   flex: 1;  
   background:white; 
   position: relative;
}

.content {
   flex: 4;
   height: 92%;
   width: 415px;
   margin-top: 5px;
   margin-bottom: 5px;
   background: lightblue;
   position: relative;
}
.content_desc {
   flex: 2;
   height: 22px;
   width: 415px;
   margin-top: 370px ;
   margin-left: 104px;
   margin-right: 98.5px;
   background-color: white;
   border: 0.3px solid;
   position: absolute;
}

.control img {
   position: absolute;
   left: 50%;
   top: 50%;
   height: 40px;
   width: 40px;
   background: white;
   box-sizing: border-box;
   transform: translate(-50%, -50%);
}
.control img:hover {
   cursor: pointer;
   background-color: yellow;
   transition-delay: 0.2s;
   animation: 0.1s ease-in;
}

的JavaScript

$(document).ready(function() {
  $('.category' > div ).on('click', function(){
  $('.wrapper').show();
  })
});

Answer 1

我對這里的“ 特殊div ”一詞不確定。 也許您可以嘗試使用toggle() 。 包裝選擇器時，還會出現語法錯誤：

 $(document).ready(function() { $('.category > div').on('click', function(){ $('.wrapper').toggle(); }) }); 

 /*styles individual divs in the category class*/ .category > div:hover { cursor: pointer; transform-style: flat; animation-delay: 0.1s; display: flex; border: 1px 1px 1px 1px solid; background-color: #898488; color: #7AC4EE; border-left-color: yellow; box-sizing: border-box; } /*class that i want to display on click*/ .wrapper { display: none; flex-wrap: wrap; justify-content: space-between; background-color: white; box-sizing: border-box; width: 623px; padding: 0; align-self: center; height: 100%; margin-bottom: auto; box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3); } /*the classes below are in .wrapper*/ .control { flex: 1; background:white; position: relative; } .content { flex: 4; height: 92%; width: 415px; margin-top: 5px; margin-bottom: 5px; background: lightblue; position: relative; } .content_desc { flex: 2; height: 22px; width: 415px; margin-top: 370px ; margin-left: 104px; margin-right: 98.5px; background-color: white; border: 0.3px solid; position: absolute; } .control img { position: absolute; left: 50%; top: 50%; height: 40px; width: 40px; background: white; box-sizing: border-box; transform: translate(-50%, -50%); } .control img:hover { cursor: pointer; background-color: yellow; transition-delay: 0.2s; animation: 0.1s ease-in; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="category"> <div class="furniture">Furniture</div> <div class="tableware">Tableware</div> <div class="jewellery">Jewellery</div> <div class="shoes">Shoes</div> <div class="water_bottles">Water Bottles</div> <div class="clothes">Clothes</div> <div class="textiles">Fabric Patterns</div> </div> <div class="upload"> <div class="wrapper"> <div class="control"><img src="back.png"></div> <div class="content"></div> <div class="content_desc"></div> <div class="control"><img src="forward.png"></div> </div> </div> 

Answer 2

您在css選擇器中犯了一個錯誤，它不是'.category' > div ，而應該是'.category > div'

$(document).ready(function() {
  $('.category > div').on('click', function(){
    $('.wrapper').toggle();
  })
});

Answer 3

使用此代碼

$(document).ready(function() {
      $('.category>div' ).on('click', function(){
     $('.wrapper').toggle();
      })
    });

並添加此CSS以在開始時隱藏div

.wrapper{
display:none
}