.toggle on div from <a> 不工作

Question

我想在单击 link 时显示隐藏的 div。我正在为我的 CMS 使用 Joomla，我已经仔细检查它是否正在加载 jQuery。这将包含我的登录信息，这是我目前拥有的信息。

HTML

<head>    
<script type="text/javascript">
    $(document).ready(function () {
        $("#login-container").toggle()
    });

    function toggleDiv(divId) {
        $("#" + divId).toggle();
    }
</script>
</head>
 <body>
<a href="javascript:toggleDiv('login-container');">Login</a>
    <div id="login-container">
        <jdoc:include type="modules" name="footer" />
    </div>
</body>

CSS

#login-container {
float: right;
z-index: 50;
padding: .2em 1.5em;
border-radius: 5px;
position: fixed;
bottom: 3em;
left: 30%;
width: 16em;
height: 9em;
background-color: #fff;
overflow: hidden;
}

Answer 1

等等，请尝试以下操作。没有理由在代码中有冗余。

<script type="text/javascript">
    $(document).ready(function (e) {             
         $(".toggler").click(function(){
           e.PreventDefault();
           $("#login_container").toggle();    
         });
    });
</script>
</head>
 <body>
<a href="" class='toggler'>Login</a>
    <div id="login_container">
        <jdoc:include type="modules" name="footer" />
    </div>
</body>

如果您想将其用作函数，请使用选择器和遍历来始终找到 dom 元素，并将它们命名为相同的选择器。此外，始终在名称 ID 中使用下划线是个好主意，但可以在 class 名称中使用“-”。

Answer 2

您可以尝试 onclick=toggleDiv(divId);return;，但肯定会有更简单的方法 jQuery。

Answer 3

Joomla 在无冲突模式下加载 jquery。

您必须将代码更改为：

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#login-container").toggle()
    });

    function toggleDiv(divId) {
        jQuery("#" + divId).toggle();
    }
</script>

参考：jQuery.noConflict()

.toggle on div from <a> 不工作

.toggle on div from <a> not working

jquery

html

css

joomla3.0