Скрыть все ранее перегруппированные элементы

У меня есть меню боковой панели, которое открывает и закрывает скрытые части страницы через jQuery. Ссылка обе стирает скрытый контент, а также добавляет и удаляет класс по ссылке. Так, например, HTML/CSSСкрыть все ранее перегруппированные элементы

<ul> 
<li><a class="linkOne" href="#">Link One</a></li> 
<li><a class="linkTwo" href="#">Link Two</a></li> 
</ul> 

<div class="linkOneBox">Stuff</div> 
<div class="linkTwoBox">Stuff</div> 

<style type="text/css"> 
.linkOneBox,.linkTwoBox {display:none} 
.current {background: #fff} 
</style>

и Jquery что-то вроде ..

$('.linkOne').click(function() { 
    $('.linkOneBox').fadeToggle(); 
    $(this).toggleClass('current'); 
    return false; 
    });

В любом случае .. мой вопрос, так как я использую тумблер, что это лучший способ, чтобы все другие переключатели, которые были оставлены открытым сбросом, отключены? Как мне это сделать, чтобы щелчок по новой ссылке также скрывал все ранее открытые окна и удалял .current?

источник

2009-10-04 Zac

я хотел бы сделать несколько изменений в HTML первый:

<ul id="menu"> 
    <li><a href="#b1">Link One</a></li> 
    <li><a href="#b2">Link Two</a></li> 
</ul> 

<div class="box" id="b2">Stuff</div> 
<div class="box" id="b1">Stuff</div>

Тогда:

$(document).ready(function(){ 

    // Initially hide the boxes 
    $('.box').hide(); 

    $('#menu a').click(function(){ 

     $('#menu a').removeClass(); // Remove 'current' class from any links 
     $('.box:visible').fadeToggle(); // Hide all previously visible boxes 

     // Fade in the box where the id is the same as the href of the clicked link 
     $($(this).attr('href')).fadeToggle(); 
     $(this).addClass('current'); // And highlight the menu link 

     return false; 
    }); 

});

Существует немного внахлест, поэтому вместо того, чтобы вы могли бы хотеть просто hide() открытое коробки перед вами выцветает новый в

источник

2009-10-04 08:32:11

Да! Большое спасибо ... это намного эффективнее, чем путь, по которому я направлялся. Что касается вашего комментария о перекрытии ... разве это не то, что вы сделали? $ ('Окно') скрыть(). Чтобы предотвратить первоначальное мерцание, у меня возникает соблазн просто скрыть их в css, поскольку они видны во время загрузки скриптов, а затем у меня будет что-то еще для людей с js off. – Zac

Теперь он теряет свой переключатель, поскольку каждая ссылка всегда включает его. Я просто добавил кнопку закрытия для каждого окна, но если есть идеи о том, как сохранить функциональность переключения, я бы с удовольствием ее услышал :) – Zac

Да, все, что я сделал был * первоначально * скрыть поля - если вы изменили $ ('box: visible'). fadeToggle(); to $ ('box: visible'). hide(), тогда я думаю, что это будет выглядеть лучше. Кроме того, если вы переместите исходный $ ('. Box'). Hide() в блок cript сразу после div .box, тогда это должно избежать мерцания и оставить их открытыми для людей, не относящихся к JS. –

Я согласен с Марком, но использование:.

$(this).addClass('current');

Поскольку toggleClass проверяет сначала, существует ли класс.

источник

2009-10-04 10:20:20 fredrik

спасибо fredrik ... вы правы, он действительно делает переключатель бесполезным – Zac

Да, хороший улов - я отредактировал свой ответ, чтобы принять во внимание ваше предложение. –

Скрыть все ранее перегруппированные элементы

ответ

Смежные вопросы