为什么使用 jQuery 组件的函数调用会重新加载 xhtml 页面？

Question

我正在使用 JSF、Primefaces 和 Bootsfaces。我正在开发一个导航栏，我必须在导航栏中创建一个下拉菜单，但是我在 b:dropmenu 实现时遇到了问题，我使用了另一种解决方案。

我的问题是当我点击Nombre de usuario 时，如果我调用mostrarOpcionesUsuario()，页面会重新加载，但是如果我将mostrarOpcionesUsuario(); 替换为alert('hello!');，系统会显示alert 并且不会刷新页面。我需要在不刷新页面的情况下拨打mostrarOpcionesUsuario()。

这是我的代码：

XHTML：

<b:navbar>
    <b:navbarLinks>
        <b:navLink onmousedown= "mostrarOpcionesUsuario(); return false;">
        <div>
            <ul>
                <li>
                    <div>
                        <span>
                            Nombre de usuario
                        </span>
                    </div>
                    <ul class = "ulOpciones">
                        <li>Web Design</li>
                        <li>Web Development</li>
                        <li>Illustrations</li>
                    </ul>
                </li>
            </ul>
        </div>
        </b:navLink>
    </b:navbarLinks>
</b:navBar>

JavaScript：

function mostrarOpcionesUsuario() {
    $(".ulOpciones").css('visibility', function (i, v) {
        if (v == 'hidden') {
            $(".ulOpciones").css({'visibility': 'visible'});
        } else {
            $(".ulOpciones").css({'visibility': 'hidden'});
        }
    });
}

同样的情况，如果我将alert 放入mostrarOpcionesUsuario()，页面不会重新加载，但使用之前的mostrarOpcionesUsuario 实现，页面会重新加载。

请帮帮我！

谢谢！

Answer 1

我找到了解决办法：

<b:navLink href="javascript:mostrarOpcionesUsuario()">

Answer 2

好吧，您自己已经回答了您的问题：BootsFaces <b:navLink> 有几个不同的选项来定义单击它时会发生什么。其中之一是href 属性，而此属性又允许您通过简单地在javascript: 前面调用JavaScript。

另一个可能更直观的解决方案是使用onclick 处理程序而不是onmousedown 处理程序。这也可以解决问题：

<b:navLink onclick="mostrarOpcionesUsuario(); return false;">