Question

我在我的应用程序上插入了一些显示/隐藏按钮。我的问题是：当我点击任何按钮时，总是先打开。这就是功能：

function showHide(shID) {
  if (document.getElementById(shID)) {
    if (document.getElementById(shID+'-show').style.display != 'none') {
      document.getElementById(shID+'-show').style.display = 'none';
      document.getElementById(shID).style.display = 'block';
    }
    else {
      document.getElementById(shID+'-show').style.display = 'inline';
      document.getElementById(shID).style.display = 'none';
    }
  } 
}

这是我的插入功能：

function insert($string)
{
    $result = '<div id="wrap">

            <a href="#" id="example-show" class="showLink" onclick="showHide(\'example\');return false;">Vizualizare</a></p>
        <div id="example" class="more">
            <p> '. $string .'</p>
            <p><a href="#" id="example-hide" class="hideLink" onclick="showHide(\'example\');return false;">Ascunde</a></p>
        </div>
                </div>';
    return $result;
}

Answer 1

您始终为showHide（）提供相同的参数，因此元素的ID将始终相同。但ID必须是唯一的。

而不是使用ID从单击的按钮开始遍历文档。

示例：

function showHide(btn)
{
  var target;
  if(btn.parentNode.parentNode.className=='more')
  {
    target=btn.parentNode.parentNode;
  }
  else
  {
    target=btn.parentNode.getElementsByTagName('div')[0];
  }

  target.style.display=(target.style.display == 'block')?'none':'block';  
  target.parentNode.getElementsByTagName('a')[0].style.display
    =(target.style.display != 'none')?'none':'block';
}

此处仅提供this（不带引号）作为showHide()

的参数

观看小提琴：http://jsfiddle.net/doktormolle/kZDvh/

Answer 2

因为btn-show或div-example没有显示：none，所以最初它们都是可见的。然后根据你的函数中的if-then序列，无论你先点击哪个按钮，浏览器总是会隐藏show-button并使div-example display：block。所以也许你需要先用一些css或js set隐藏其中一个。

Answer 3

试试这个：

<span><div>
<input type="button" value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show'; }" style="font-size: 11px; cursor: pointer;">
</div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;"> <!-- Is content default show: remove none -->

    <!-- Content Show/Hide Here -->

</div>
</div></span>

显示/隐藏按钮

3 个答案: