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

《脚本语》

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

超文本标记语言

<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>

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

提前感谢您的帮助。