单击链接文本时隐藏 div答案

【问题标题】：Hide div when clicking on link text单击链接文本时隐藏 div
【发布时间】：2015-03-31 03:09:14
【问题描述】：

我的 wordpress 主页在背景中有一个全屏滑块和一个文本徽标。

我想通过单击我的文字徽标来隐藏和显示此滑块。

我使用的功能确实很棒，但我必须在文本徽标上单击两次才能使其运行。

<div id="conteneur">
    <div id="fullscreen-slider" class="royalSlider rsDefault">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/perron_01.jpg" />
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/perron_01.jpg" />
    </div>

    <header>
        <div id="logo">
            <a href="#" onclick="toggle_visibility('fullscreen-slider');">Adequat</a>
        </div>

还有脚本：

<script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}</script>

我认为浏览器会搜索 href="#"，只有当他找到它时，我的脚本才会运行良好。

感谢您的帮助，很抱歉，我是初学者，我的网站尚未上线。

阿德里安·奎莱

【问题讨论】：

你是使用 jQuery 还是直接使用 javascript？
只是一个脚本，但如果你有想法，我当然想试试 jQuery！

标签： html toggle hide visibility

【解决方案1】：

如果您使用 jQuery（我推荐）Here is a jsFiddle 示例。

该脚本的使用/维护非常简单。

JQUERY

$('#logo').click(function(event) {
    $('#logo a').toggle();
    event.preventDefault();
});

您需要修改您的 css 等以满足您的需求，但这应该可以帮助您。

【讨论】：

谢谢你们，实际上，这有点复杂，因为我希望通过单击文本徽标来隐藏幻灯片并通过再次单击它来显示。另一件事是我不希望这个幻灯片出现在其他页面上，因为它实际上在我的“header.php”上，因为我希望它出现在主 div 内容中。这是我正在尝试做的确切事情：johnpawson.com
但正如我所说，我想在点击后完全删除课程。因为我的幻灯片在 header.php 上。不知道是不是很清楚抱歉。

【解决方案2】：

反过来做：

<script type="text/javascript">
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'none')
            e.style.display = 'block';
        else
            e.style.display = 'none';
    }
</script>

【讨论】：