0

我有 5 个带有“rocksMenu_zoomContainer”类的 div（不是兄弟姐妹）。我正在使用以下代码：

function zoomContainers_showHide(){
if(menuItem_place === 0){
  $("#granitos_zoomContainer").show();
}
else if(menuItem_place === 1){
  $("#marmores_zoomContainer").show();
}
else if(menuItem_place === 2){
  $("#calcarios_zoomContainer").show();
}
else if(menuItem_place === 3){
  $("#compositos_zoomContainer").show();
}
else if(menuItem_place === 4){
  $("#ardosias_zoomContainer").show();
}

}

此函数zoomContainers_showHide()在单击（按钮）中执行。

这很好用，问题是遵循一个总是可见的规则，所有其他的总是隐藏的。

HTML 标记：

<!-- Granitos -->

          <div id="rocksMenu_granitos" class="menuItem">
            <div id="granitos_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_granitos_subContainer" class="menuItem_subContainer">
              <img id="granitos" class="rocksMenu_image" src="images/rocksMenu_granitos.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_granitos" -->

<!-- Mármores -->

          <div id="rocksMenu_marmores" class="menuItem">
            <div id="marmores_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_marmores_subContainer" class="menuItem_subContainer">
              <img id="marmores" class="rocksMenu_image" src="images/rocksMenu_marmores.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_marmores" -->

<!-- Calcários -->

          <div id="rocksMenu_calcarios" class="menuItem">
            <div id="calcarios_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_calcarios_subContainer" class="menuItem_subContainer">
              <img id="calcarios" class="rocksMenu_image" src="images/rocksMenu_calcarios.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_calcarios" -->

<!-- Compósitos -->

          <div id="rocksMenu_compositos" class="menuItem">
            <div id="compositos_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_compositos_subContainer" class="menuItem_subContainer">
              <img id="compositos" class="rocksMenu_image" src="images/rocksMenu_compositos.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_compositos" -->

<!-- Ardósias -->

          <div id="rocksMenu_ardosias" class="menuItem">
            <div id="ardosias_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_ardosias_subContainer" class="menuItem_subContainer">
              <img id="ardosias" class="rocksMenu_image" src="images/rocksMenu_ardosias.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_compositos" -->

我单击按钮，它显示相应的 div，但所有其他的仍然可见。我无法弄清楚这个 - 我会使用兄弟姐妹（），但他们不是兄弟姐妹......

佩德罗

4

4 回答 4

2

我认为这会奏效

function zoomContainers_showHide(){
$(".rocksMenu_zoomContainer:visible").hide();
$(".rocksMenu_zoomContainer").eq(menuItem_place).show();
}
于 2013-04-24T11:57:32.527 回答
1

此功能将隐藏所有菜单，然后在 menuItem_place 显示一个：

function zoomContainers_showHide(){    
    $(".rocksMenu_zoomContainer").hide();
    $(".rocksMenu_zoomContainer:eq(" + menuItem_place +")").show();
}
于 2013-04-24T11:56:09.237 回答
1

你为什么不把它们都隐藏起来，然后显示你想显示的那个？无论如何，对于用户来说，这一切都太快了……

function showZoomContainer(id) {
    $('.menuItem').hide(); // use slide-up or whatever if you need something else.
                           // it won't matter for already hidden divs
    $('#' + id).show(); // or slide-down, or watever
}

像这样使用：

// show compositos, hide all others:
showZoomContainer('rocksMenu_compositos');
于 2013-04-24T11:57:29.963 回答
1

尝试以下操作：

function zoomContainers_showHide(){
   $(".rocksMenu_zoomContainer:visible").hide();
   $(".rocksMenu_zoomContainer").eq(menuItem_place).show();
}
于 2013-04-24T11:58:34.903 回答