Question

我想在点击链接时显示隐藏的div。我使用Joomla作为我的CMS，我已经仔细检查过它正在加载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 elemtn，并将它们命名为所有相同的选择器。另外，总是在名称id中使用下划线，但在类名中可以使用“ - ”。

Answer 2

Joomla在noconflict模式下加载jquery。

您必须将代码更改为：

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

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

参考：jQuery.noConflict()

Answer 3

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

.toggle来自<a> not working</a>的div

3 个答案: