Ich habe eine Div mit 7 Kindern. Beim Hover ändert ein Element den Hintergrund und die Textfelder links von der Mitte. Ich habe das mit CSS gemacht. Jetzt möchte ich, wenn der Benutzer auf ein Element klickt, zeigt es ein anderes div (.wrapper) mit JavaScript. Wenn der Benutzer erneut klickt, wird das jeweilige Div ausgeblendet. Wie kann ich diese Logik mit JavaScript erreichen?

Hier ist mein HTML-Snippet

<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-Code

/*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();
  })
});
0
molten-lead 18 Jän. 2019 im 15:47

3 Antworten

Beste Antwort

Verwenden Sie diesen Code

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

Und füge dieses CSS hinzu, um div beim Starten zu verbergen

.wrapper{
display:none
}
-1
Ved_Code_it 18 Jän. 2019 im 13:14

Ich bin mir nicht sicher über den Begriff bestimmte div hier. Vielleicht können Sie es mit toggle() versuchen. Sie haben auch einen Syntaxfehler beim Umschließen des Selektors:

$(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>
2
Mamun 18 Jän. 2019 im 12:53

Sie haben einen Fehler in Ihrer CSS-Auswahl gemacht, es ist nicht '.category' > div, es sollte '.category > div' sein

$(document).ready(function() {
  $('.category > div').on('click', function(){
    $('.wrapper').toggle();
  })
});
1
Saraband 18 Jän. 2019 im 13:04