Простой jQuery Accordion - скрыть кнопку на видном - PullRequest
Новая
       4

Простой jQuery Accordion - скрыть кнопку на видном

1 голос
/ 03 августа 2011

Любые предложения будут хорошими. Это очень просто, но я не могу понять это.

Я использую простой аккордеонный скрипт jQuery. Вот HTML-код: 

<ul id="menu">
    <li>
        <a>Weblog Tools</a> <!-- THIS IS MY LINK BUTTON -->
            <ul>
                <li><a href="http://www.pivotx.net/">PivotX</a></li>
                <li><a href="http://www.wordpress.org/">WordPress</a></li>
                <li><a href="http://www.textpattern.com/">Textpattern</a></li>
                <li><a href="http://typosphere.org/">Typo</a></li>
            </ul>
    </li>
    <li>
        <a>Programming Languages</a> <!-- THIS IS MY LINK BUTTON -->
            <ul>
                <li><a href="http://www.php.net/">PHP</a></li>
                <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
                <li><a href="http://www.python.org/">Python</a></li>
                <li><a href="http://www.perl.org/">PERL</a></li>
                <li><a href="http://java.sun.com/">Java</a></li>
                <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
            </ul>
     </li>
</ul>

А вот и скрипт: 

function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();

    $('a.collapse').click(

function() {
    var checkElement = $(this).next();
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    return false;
        }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

    $('#menu ul:visible').slideUp('normal');


        checkElement.slideDown('normal');
    return false;
            }
        });
    }

    $(document).ready(function() {initMenu();});

Хороший простой сценарий, красивый и легкий.

Это мой вопрос, любые предложения будут удивительными!

Мне нужно, чтобы <a>Link Button</a> в текущем видимом меню было display: none и чередоваться между открытыми меню.

Таким образом, идея в том, что, когда текущее видимое меню открыто, к ссылке, которая открывает его, добавляется стиль display: none. Но все остальные <a>Link Buttons</a> должны быть видны и не должны применяться стиль display: none. Это значит, что меню все еще может быть функциональным.

Только видимое открытое меню должно иметь display: none.

Это было бы так здорово, если бы вы могли помочь. Заранее спасибо.

1 Ответ

0 голосов
/ 03 августа 2011

Изменить menu.js из 

function initMenu() {
  $('#menu ul').hide();
  $('#menu ul:first').show();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});

К этому: 

function initMenu() {
  $('#menu ul').hide();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu li a').show();
        $(this).hide();
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
  );
}
$(document).ready(function() {initMenu();});

Я изменил первую часть, чтобы она не отображала первые подменю.Затем я добавил эти строки, чтобы они показывали другие ссылки, но скрывали активную ссылку. 

$('#menu li a').show();
$(this).hide();

РЕДАКТИРОВАТЬ:

Вы также можете проверить работающую реализацию на http://jsfiddle.net/3cmPz/

...