मैं चाहता हूं कि जब क्लिक तत्व 2 div को सक्रिय करे, तो तत्व गायब हो जाना चाहिए। और Element2 div शुरुआत में प्रकट नहीं होना चाहिए।

$(".toggle").click(function() {
  $(".element2").toggle();
});


$(".close").click(function() {
  $(".element2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
  Element 1
  <div class="toggle">
    toggle
  </div>
  <div class="element2">
    Element 2 
    <div class="close">close Element 2</div>
  </div>
</div>
0
Davikx 29 मार्च 2018, 01:48

3 जवाब

सबसे बढ़िया उत्तर

शुरुआत में एलीमेंट 2 को छिपाने के लिए आपको या तो एक स्टाइल टैग जोड़ने की जरूरत है या इससे भी बेहतर एक सीएसएस फाइल जोड़ने की जरूरत है जहां आप अपनी सभी स्टाइलिंग को एक ही स्थान पर रखेंगे।

स्टाइल टैग के लिए:

<div class="element2" style="display:none">

सीएसएस के लिए:

.element2 {
    display: none;
}

फिर आपके कोड के लिए आप करीब हैं। तत्व को छिपाने के लिए, आपको इसे इसमें बदलना होगा:

$(".toggle").click(function() {
    $(".element2").show();
    $(".element").hide();
});

$(".close").click(function() {
    $(".element2").hide();
    $(".element").show();
});

एचटीएमएल में कुछ बदलावों की आवश्यकता होगी, इससे मैंने जो लिखा वह काम करेगा जिस तरह से मुझे विश्वास है कि आप इसे चाहते हैं:

<div class="element">
  Element 1
  <div class="toggle">
    toggle
  </div>
</div>
<div class="element2">
  Element 2 
  <div class="close">close Element 2</div>
</div>
1
BShaps 28 मार्च 2018, 23:09

किसी तत्व को प्रारंभ से छिपाने के लिए डिस्प्ले कोई नहीं जोड़ें:

<div class="element2" style="display:none">

ऐसा लगता है कि आपका शेष कोड वही कर रहा है जो इसे माना जाता है, जब तक कि मैं गलत समझ नहीं रहा हूं "मैं चाहता हूं कि जब क्लिक तत्व 2 div को सक्रिय करे, तो तत्व गायब हो जाना चाहिए" ... जो पूरी तरह से संभव है।

2
JacobIRR 28 मार्च 2018, 22:54

बस $(".element2").hide(); इसे शुरू में छुपाएं

$(function() {
  $(".element2").hide();
  $(".toggle").click(function() {
    $(".element2").toggle();
  });

  $(".close").click(function() {
    $(".element2").hide();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1
  <div class="toggle">Toggle </div>
  <div class="element2"> Element 2
    <div class="close"> close</div>
  </div>
</div>
1
vinayakj 28 मार्च 2018, 23:06