Question

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

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

这是我的代码：

XHTML：

mostrarOpcionesUsuario()

JavaScript的：

<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>

如果我将function mostrarOpcionesUsuario() { $(".ulOpciones").css('visibility', function (i, v) { if (v == 'hidden') { $(".ulOpciones").css({'visibility': 'visible'}); } else { $(".ulOpciones").css({'visibility': 'hidden'}); } }); }放在alert中，页面没有重新加载，则会出现相同的情况，但在之前的mostrarOpcionesUsuario()实施中，页面会重新加载。

请帮帮我！

谢谢！

Answer 1

我找到了解决方案：

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

Answer 2

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

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

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

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

2 个答案: