Javascript隱藏/顯示div

Question

我有一個javascript hide/show div與4個不同的div去。它正在部分工作，但沒有按照我想要的方式工作。當我點擊其中一個div時，它會打開隱藏的div，這是完美的，但是當我點擊另一個鏈接打開另一個div時，我想先點擊另一個鏈接關閉，然後打開新鏈接。這是我的JavaScript。

$('[id^="hideshow"]').on('click', function(event) { 
    var dataValue = $(this).attr('data-value'); 
    dataValue = $('#'+dataValue); 
    $(dataValue).toggle('hide'); 
}); 

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb"> 
    <hr class="dark2"> 
    <p></p>Whats in the Bag &nbsp;<i class="fa fa-angle-down" style="font-size:24px"></i></p> 
    </div> 
</div></a> 

    <div id='content2' style="display:none"> 
<div class="wedge-thumbs"> 
    <img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header"> 
    <a href="#" class="customize"><span style="customize"> Customize It</span></a> 
    <hr class="dark"> 
    <span class="title">Milled Grind 54&deg; LB</span> 

</div> 
<div class="wedge-thumbs"> 
    <img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header"> 
    <a href="#" class="customize"><span style="customize"> Customize It</span></a> 
    <hr class="dark"> 
    <span class="title">Milled Grind 54&deg; LB</span> 

</div> 

<div class="wedge-thumbs"> 
    <img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header"> 
    <a href="#" class="customize"><span style="customize"> Customize It</span></a> 
    <hr class="dark"> 
    <span class="title">Milled Grind 54&deg; LB</span> 

</div> 

</div> 

Answer 1

請試試這個

$('[id^="hideshow"]').on('click', function(event) { 
var dataValue = $(this).attr('data-value'); 
dataValue = $('#'+dataValue); 
$(dataValue).toggleClass('hide'); 
}); 

Answer 2

// Hopefully you have some selector reference to target them all 
var $all = $(".drops"); // Clearly I used .drops for example 

$('[data-value]').on('click', function(event) { 

    var $target = $('#'+ this.dataset.value); 

    $all.not($target).hide(); // Hide all but target one 
    $target.toggle();   // Toggle target one 
}); 

這裏有一個改進的例子：

var $all = $(".togglable"); 
 

 
$('[data-toggle]').on('click', function(event) { 
 

 
    var $target = $(this.dataset.toggle); 
 

 
    $all.not($target).hide(); // Hide all but target one 
 
    $target.toggle();   // Toggle target one 
 
});

[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;} 
 
.hidden{display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a data-toggle="#el1">TOGGLE1</a> 
 
<a data-toggle="#el2">TOGGLE2</a> 
 
<a data-toggle="#el3">TOGGLE3</a> 
 

 
<div id="el1" class="togglable hidden">ELEMENT1</div> 
 
<div id="el2" class="togglable hidden">ELEMENT2</div> 
 
<div id="el3" class="togglable hidden">ELEMENT3</div>

Answer 3

這將是更好，如果你可以給你的div一個commo n個等級的ID，而不是使您可以隱藏使用這種通用類像其他的div：如果你不能，你可以通過所有的div循環

$('.common_class').addClass('hide'); 

，並顯示當前之前隱藏他們點擊一個：

$('[id^="hideshow"]').on('click', function(event) { 
    $('[id^="hideshow"]').each(function(){ 
     $('#'+$(this).data('value')).addClass('hide'); 
    }); 

    dataValue_id = $('#'+$(this).data('value')); 
    $(dataValue_id).toggleClass('hide'); 
}); 

希望這有助於。

片段使用普通類：

$('.common_class').on('click', function(event) { 
 
    $('.common_class_2').not($('.common_class_2', this)).addClass('hide'); 
 
    $('.common_class_2', this).toggleClass('hide'); 
 
});

.hide{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='common_class'>DIV 1 
 
    <p class='common_class_2'>Content 1</p> 
 
</div> 
 
<div class='common_class'>DIV 2 
 
    <p class='common_class_2 hide'>Content 2</p> 
 
</div> 
 
<div class='common_class'>DIV 3 
 
    <p class='common_class_2 hide'>Content 3</p> 
 
</div> 
 
<div class='common_class'>DIV 4 
 
    <p class='common_class_2 hide'>Content 4</p> 
 
</div>