打开另一个div时，我需要折叠什么代码？ [英] What code do i need to collapse a div when another is open?

问题描述

我使用简单的代码使div折叠，就是这样：

i use a simple bit of code to make a div collapse, this is it:

<script language="JavaScript">
    <!--   
        function expand(param)   
        {   
            param.style.display=(param.style.display=="none")?"":"none";   
        }   
    //-->  
</script>

我要添加什么代码以使其在一个div打开时识别上一个div折叠？< br>这是我要使用的链接：

what code do i add to make it recognise when one div is open an collapse the previous div?
here's the link I'd use:

<a href="javascript:expand(document.getElementById('div1'))">Link 1</a>  
      <div id="div1" width="300px" style="display:none"></div>

有什么想法吗？

推荐答案

如果您愿意使用jQuery，那么您感兴趣的选择器就是类似

If you were willing to use jQuery, the selector of your interest is something along the lines of

$('div#parent-container > div').filter(':visible');

例如，如果我要演示下一个&以前，我会类似的操作。通过定向链接，可以将ID附加到 divs 并引用锚的 href 属性中的链接。 （现在包含在示例中）

For example, if I were to demonstrate with next & previous, I would do it something like this. With targeted links it would work by appending ID's to the divs and referencing those in the href attribute of `anchors'. (now included within example)

出现以下情况：

$(function(){
    //Reference Object
    var $divs = $('div > div');
    //Buffer for selected variable
    var $selected = 0;
    //Show first
    $divs.eq(0).show();


    $('#next').click(function(){
        //Update selected var
         $selected = $divs.filter(':visible');
        //Save next to variable
        var $next = $selected.next();
        //Change Visibility
        toggle($next);
        //Prevent Default
        return false;
    });

     $('#prev').click(function(){
        $selected = $divs.filter(':visible');
        var $prev = $selected.prev();
        toggle($prev);
        return false;
    });

    $('a').click(function(){
        $selected = $divs.filter(':visible');
        var selector = $(this).attr('href');
        if(selector == '#') return false;
        toggle( $( selector ) );
        return false;
    });


    var toggle = function($toggle){
     if(!$toggle.length) return false;
         $selected.hide();
         $toggle.show();   
     }
});

---

---

<!--Simple Implementation and dependancies-->
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
<a href="#item-4">Show Item Four</a>

<div>
    <div id="item-1">One</div>
    <div id="item-2">Two</div>
    <div id="item-3">Three</div>
    <div id="item-4">Four</div>
    <div id="item-5">Five</div
    <div id="item-6">Six</div>
</div>

---

---

div > div {
 font-size:5em;
 width:auto;
 text-align:center;
 padding:20px 0;   
 display:none;
}

这篇关于打开另一个div时，我需要折叠什么代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！