JS显示/隐藏切换

JS Reveal/Hide toggle

本文关键字：隐藏 显示 JS      更新时间：2023-09-26

希望只是一个快速的。我已经编好了这个：

<script>
$("div.design-project").css('display', 'none');
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
    document.getElementById(tid).style.display = "block";
    }
else {
    document.getElementById(tid).style.display = "none";
    }
}
</script>

如果链接有href:

href="javascript:InsertContent('design-project-1');"

它在下面显示这个div。如果你再点击它，它就会消失。然后，如果你点击另一个链接，说有href:

href="javascript:InsertContent('design-project-2');"

它将显示这个div等等。

但是，如果您打开了一个div，并单击另一个锚点链接打开另一个div时，它不会关闭已经打开的div。

有什么想法吗？此外，如果有更好的方法，请告诉我。

谢谢，R

这是要求的HTML：

<a class="design-projects-slides-title" href="javascript:insertDesignProjectContent('design-project-1');">Title of project</a>
<!-- start of .design-project --><div class="design-project" id="design-project-1">
                <div class="grid_6"><div class="project-info-area">
                    <h2>Title of project</h2>
                        <p>A rural retreat in the city. Built almost entirely from reclaimed element this little new-build timber cabin provides guest accommodation.<p>
                        <p>By coincidence a former chapel partition was found that matched the dimensions required. Used in their original painted condition, these doors became the front elevation and concertina open to one side - perfect for warm summer days. Further reclaimed elements include a bespoke curtain made from found patchwork, Victorian conservatory grills fitted over modern french heaters and industrial lights, taps, wash basin and an exposed shower fitting. Salvaged hardwood strip flooring and our Heathrow Terminal 2 stone fold from the floor to the walls. A thorough use of salvage all round!</p>
                </div></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_12 project-info-images"><img src="http://placehold.it/940x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                </div><!-- end of .design-project -->

更新

最后，我用了你的答案组合——谢谢！

<!-- Reveal/hide sections on design projects/joinery -->
<script>
/* This is for the 'choose a project' reveal/hide */
$("div.slider-content").css('display', 'block');
$(".design-projects-slides-title").click(function() {
    $(".slider-content").hide();
});
/* This is for reveal/hide on the product content */
$(".design-project").hide()
$('.design-projects-slides-title').click(function(){
    var id = $(this).attr('id')
    var content_id = id+"-content"
    $('#'+content_id).slideDown('slow')
});
$(".slider-trigger").click(function() {
    $(".design-project").hide();
});
</script>

首先，我看到您使用jQuery，为什么不使用它来实现整个流程呢？

你可以做一些类似的事情：

$(".mydivclass").click(function(){
   $(".mydivclass").hide();
   $(this).show();
})

使用jQuery切换来实现您想要做的事情。例如

function InsertContent(tid) {
    $('#'+tid).toggle()
}

您应该做的另一个改进是，不必在每个href中硬编码id，只需向元素添加一个类，覆盖元素的onclick并切换相关内容。要获取相关内容，您可以使用命名法，例如，如果您使用id='myid'作为锚点，则使用id="myid_content"作为内容，因此在点击功能中，您可以切换内容，例如

HTML:

<a class="content-link" id="myid">click me</a>
<div id="myid_content">
Here is the content
</div>

JavaScript:

$('.content-link').click(function(){
    var id = $(this).attr('id')
    var content_id = id+"_content"
    $('#'+content_id).toggle()
}

以下是jsFiddle 的工作示例

更好的做法是将可点击的链接和内容保留在div中，这样你就不需要设置id，只需设置一些类，通过父子关系，你就可以获得什么是内容，例如

HTML

<div class="content-wrap">
<a class="content-link" >Click Me</a><br/>
<div class="content">
Here is the content for click me
</div>
</div>

JavaScript:

$('.content-link').click(function(){
    var id = $(this).parent().find(".content).toggle()
})​

点击此处查看操作

HTML

<a id="id1" href="#" rel="divContent1" >First</a><br/>
<a id="id2" href="#" rel="divContent2">Second</a><br/>

<div id="divContent1" class="content">
    Content of Div 1
</div>
<div id="divContent2" class="content">
    Content of Div2
</div>​

Javascript

$(function(){
   $(".content").hide();
    $("a").click(function(e){
      e.preventDefault()
      var divToShowId=$(this).attr("rel");
       $(".content").hide();
       $("#"+divToShowId).show();   
    });     
})​

我使用Content-dvs的id作为链接的rel属性值，因为我们需要某种方法来连接链接及其内容。

以下是工作演示：http://jsfiddle.net/Kx9Ma/5/

相关文章：