Question

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

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，但所有其他div仍然可见。我无法想出这个 - 我会使用兄弟姐妹（），但他们不是兄弟姐妹......

佩德罗

Answer 1

我认为这会起作用

function zoomContainers_showHide(){
$(".rocksMenu_zoomContainer:visible").hide();
$(".rocksMenu_zoomContainer").eq(menuItem_place).show();
}

Answer 2

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

function zoomContainers_showHide(){    
    $(".rocksMenu_zoomContainer").hide();
    $(".rocksMenu_zoomContainer:eq(" + menuItem_place +")").show();
}

Answer 3

为什么不隐藏所有，然后展示你要展示的那个？对于用户来说，无论如何都会看到差异太快......

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');

Answer 4

尝试以下方法：

function zoomContainers_showHide(){
   $(".rocksMenu_zoomContainer:visible").hide();
   $(".rocksMenu_zoomContainer").eq(menuItem_place).show();
}

5个div，同一个班级，显示一个 - 隐藏其他人（不是兄弟姐妹）

4 个答案: