Question

这是我的代码：

        <div id="templatemo_menu">
                <ul>
                    <li><a href="#" class="current">Home</a></li>
                    <li><a href="#">Login</a></li>
                    <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->
                    <li><a href="#">About</a></li>
                    <li><a href="#" class="last">Contact Us</a></li>
                </ul>

                <ul>
                    <li><a href="#" class="current">Home</a></li>
                    <li><a href="#">Profile</a></li>
                    <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->
                    <li><a href="#">Leave</a></li>
                    <li><a href="#">Complaint</a></li>
                    <li><a href="#" class="last">Resignation</a></li>
                </ul>
        </div>
    </div>

现在当员工访问我的主页而未登录我的网站时，我想在我的菜单栏上显示：

         <ul>
                    <li><a href="#" class="current">Home</a></li>
                    <li><a href="#">Login</a></li>
                    <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->
                    <li><a href="#">About</a></li>
                    <li><a href="#" class="last">Contact Us</a></li>
                </ul>

我想在菜单栏中隐藏它：

    <ul>
                    <li><a href="#" class="current">Home</a></li>
                    <li><a href="#">Profile</a></li>
                    <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->
                    <li><a href="#">Leave</a></li>
                    <li><a href="#">Complaint</a></li>
                    <li><a href="#" class="last">Resignation</a></li>
                </ul>

但是当员工登录我的网站时，我想在我的按钮点击事件的菜单栏上显示：

    <ul>
                    <li><a href="#" class="current">Home</a></li>
                    <li><a href="#">Profile</a></li>
                    <!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->
                    <li><a href="#">Leave</a></li>
                    <li><a href="#">Complaint</a></li>
                    <li><a href="#" class="last">Resignation</a></li>
                </ul>

我想在按钮点击事件的菜单栏中隐藏它：

主页
登录
关于
联系我们

任何人都可以建议我怎么做???

Answer 1

一个简单的解决方案是利用jQuery的$ .click（）方法来检测相关标签何时被点击，然后应用显示菜单的样式。或者更好的是，使用jQuery的$ .toggle来隐藏和显示基于交替点击事件的菜单，应用和删除相同的样式。

如果您可以将您的网站放置在像JSFiddle这样的网站上，那么我们可以更加简单地了解您的标记代表什么以及如何提供帮助。祝你好运！

Answer 2

如果您更喜欢使用JavaScript，那么解决方案是在点击登录后：

document.querySelector('#templatemo_menu ul:nth-child(1)').style.display='none';
document.querySelector('#templatemo_menu ul:nth-child(2)').style.display='block';

如果没有登录的访客用户使用

document.querySelector('#templatemo_menu ul:nth-child(2)').style.display='none';
document.querySelector('#templatemo_menu ul:nth-child(1)').style.display='block';

注意：但是，您可能希望选择服务器端解决方案来检查会话或cookie，因为当用户刷新页面时JavaScript不起作用。

根据按钮单击事件显示和隐藏子HTML标记

2 个答案: