Question

任何建议都会很好。这很简单，但我无法弄清楚。

我使用的是一个简单的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。

如果你能提供帮助，这将是非常棒的。提前谢谢。

Answer 1

从

修改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/

查看有效的实施方案

简单的jQuery手风琴 - 可见隐藏按钮

1 个答案: