Какой код мне нужен, чтобы свернуть div, когда другой открыт? - PullRequest
Новая
       26

Какой код мне нужен, чтобы свернуть div, когда другой открыт?

3 голосов
/ 01 марта 2011

Я использую простой кусочек кода, чтобы сделать развал div, вот оно: 

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

какой код мне добавить, чтобы он распознал, когда один div открыт, если свернуть предыдущий div?
вот ссылка, которую я бы использовал: 

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

Есть идеи?

Ответы [ 2 ]

4 голосов
/ 01 марта 2011

Это то, для чего jQuery работает очень хорошо.Вот рабочий пример в jsfiddle.

http://jsfiddle.net/mrtsherman/uqnZE/

Пример html 

<div class="category">A
    <div class="artists">Apple<br/>Ace<br/>Ants<br/></div>
</div>
<div class="category">B
    <div class="artists">Bee<br/>Bop<br/>Book<br/></div>
</div>
<div class="category">C
    <div class="artists">Cake<br/>Chimp<br/>Charles<br/></div>
</div>

И код: 

$(".category").click( function() {    
    $(".artists").hide();
    $(this).children(".artists").show();
});

В основном, что этоон скрывает все элементы div, содержащие исполнителей, а затем показывает элемент div для того, на кого вы нажали.Действительно просто.

2 голосов
/ 04 марта 2011

Если бы вы хотели использовать jQuery, то интересующий вас селектор - это что-то вроде 

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

Например, если бы я продемонстрировал следующий и предыдущий, я бы сделал это как-то так .С целевыми ссылками это будет работать путем добавления идентификаторов к divs и ссылки на них в атрибуте href якорей.(теперь включено в пример)

Что-то, что связывает : 

$(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;
}
...