0

我有一个正在处理的代码，它有一个标题标签和一个向右浮动的箭头，当您单击该箭头时，它会显示隐藏元素的内容并将向下箭头更改为向上箭头。一切似乎都工作正常，除了我在切换中图像下的链接不起作用。由于某种原因，我无法突出显示文本，所以我假设我的编码中某处存在重叠。

JavaScript

    function toggleDisplayNewark() {
    document.getElementById("toggleMe").style.display == "none";
    if(document.getElementById("toggleMe").style.display == "none" ) {
        document.getElementById("toggleMe").style.display = "inline";
        document.getElementById("toggleMe").style.visibility = "visible";
        document.getElementById("arrow").style.background = "url(img/up.png) no-repeat";
    } else {
        document.getElementById("toggleMe").style.display = "none";
        document.getElementById("arrow").style.background = "url(img/down.png) no-repeat";
    }
}

的HTML

            <div id='newark'>
                    <div class='text-heading'>
                        <h2>Newark</h2>
                        <a href="#newark" onclick="toggleDisplayNewark();">
                            <div id='arrow'></div>
                        </a>    
                    </div>
                    <div id='toggleMe' style='display: none;'>  
                        <div class='alignleft thumb-imgs'>
                            <img src='img/excercise.png' />
                            <a href='http://exercise.com/' target='_blank'>Exercise Institute</a>
                        </div>                      
                        <div class='clear'></div>   
                    </div>
                </div>

CSS

#arrow {background: url(http://emf-websolutions.com/wp-content/uploads/2013/03/down.png) no-repeat; height: 27px; width: 29px; float: right; margin: -30px 10px 0 0;}   
#toggleMe {display: none;}
.text-heading {-webkit-border-radius: 5px; border-radius: 5px; margin: 10px 0; width: 640px; padding: 5px 0px; background: #333; border: 1px solid red;}
.clear {clear: both;}
.thumb-imgs {width: 204px; height: 210px; padding: 5px 5px 40px 5px;}

在将其放入 wordpress 之前，我将其构建在一个 html 文件中，以便确保它正常工作。我似乎无法找到问题所在。我已经删除了编码，这样它就不会占用太多空间。这样做的想法是在右侧有一个带有箭头的标题，以下拉此框，其中包含 3 张图像，每行下都有一个链接。

提前感谢您的帮助。

4

1 回答 1

0

http://jsfiddle.net/QXSXC/

删除onclick

<a href="#newark" >

并使用 jQuery：

$('#newark').click(function() {
    document.getElementById("toggleMe10").style.display == "none";
    if(document.getElementById("toggleMe10").style.display == "none" ) {
        document.getElementById("toggleMe10").style.display = "inline";
        document.getElementById("toggleMe10").style.visibility = "visible";
        document.getElementById("arrow10").style.background = "url(img/up.png) no-repeat";
    } else {
        document.getElementById("toggleMe10").style.display = "none";
        document.getElementById("arrow10").style.background = "url(img/down.png) no-repeat";
    }
});

#newark如果您不能使用 jQuery，您可以使用纯 JS google分配一个处理程序

于 2013-03-22T19:57:41.963 回答