Question

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

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个图像，每个图像下面有一个链接。

提前感谢您的帮助。

Answer 1

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";
    }
});

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

Wordpress - Javascript切换Div元素显示样式

1 个答案: