根据页面上是否存在元素有条件地隐藏 div答案

【问题标题】：Conditionally hide div based on if element is present on page根据页面上是否存在元素有条件地隐藏 div
【发布时间】：2019-04-16 10:09:23
【问题描述】：

我正在尝试找出在我的 volusion 商店中隐藏/显示左侧导航菜单的最佳方式。

是否可以通过 javascript/jquery 根据页面上存在另一个元素的天气来更改 div 的 css 显示类型？

我问的原因是这个软件的模板有点复杂。整个站点只有一个皮肤文件。如果我想要加载左侧导航，它必须在皮肤文件中。如果它在皮肤文件中，它将在除主页之外的所有页面上加载。

因为这是电子商务软件，我可以轻松地从我的信息页面添加/删除内容和元素，但产品和类别页面是动态加载的。我想在我的信息页面上显示左侧菜单，但在我的产品/类别页面上隐藏它。

这让我回到了最初的问题。由于我可以轻松地将 html 元素添加到我的信息页面，我是否可以简单地在页面中添加 <br class="show-left-nav" /> 以触发 javascript css 更改？

http://xlevj.jyetp.servertrust.com/contact-us_a/286.htm

谢谢！

【问题讨论】：

是的，这是可能的。不过，您可能不应该为此使用不相关的 HTML，而是为相关的内容添加一个类。 IE。
好电话。谢谢跳跃。

标签： javascript jquery html css

【解决方案1】：

是的！

if($('.someElement').length){  // returns true if element is present
  // show or hide another div
  $('.otherElement').hide();
}

【讨论】：

所以我理解正确，这段脚本会检测页面上是否存在类，如果存在，它会隐藏一个元素？我认为这是相反的。我需要元素检测来显示一个类是否存在，然后默认隐藏！
@AlexRitter 是的！这只是为了演示..您可以将其更改为.show()。或者你可以使用else
工作得很好。谢谢！
Mohammad - 另一个快速的问题。如果检测到元素，我还需要这段脚本来更改 div 的宽度。 “content_area”的 div id 需要由该脚本动态添加 760px 的宽度。帮忙？
@AlexRitter $('#content_area').width('760');

【解决方案2】：

我会说非常直截了当。

#sidebar {display:none;}

javascript：

var conditionalEl = document.getElementById("TestId");
var sidebar = document.getElementById("sidebar"); 
if(typeof(conditionalEl) !== undefined){
    sidebar.style.display = "block";
}

jQuery：

if($("#TestId")){
    $("#sidebar").show();
}

【讨论】：

【解决方案3】：

如果您可以使用 id="content" 访问 div，则在其开头添加元素。

<div id="content">
    <br class="show-left-nav" />
    <div id="content_area"></div><!--Already exists-->
    <div id="leftNav"></div><!--Already exists-->
</div>

并在您的 CSS 中添加

.show-left-nav{display:none;}
#leftNav{display:none;}
.show-left-nav ~ #leftNav{display:block;}

~ 是general sibling selector

【讨论】：

leftNav 将是 content_area 的兄弟；因此它不能是 content_area 的孩子的兄弟。
这本来是完美的，除了我只能访问#content_area，它是#content 的子项，而不是#leftNav 的兄弟项
@AlexRitter 啊抱歉...您在另一条评论中提到您可以访问具有 id 内容的 div。现在，对于 #content_area，您只能访问其内容对吗？或者您可以向#content_area 本身添加一个类吗？

【解决方案4】：

如果可以在层次结构的某处向上添加一个类（例如在body标签上），那么您可以使用以下方法控制侧边栏显示：

body.hide-left-nav .left-nav { display: none; }
/* or if you can inject div.hide-left-nav on previous sibling of sidebar */
div.hide-left-nav ~ .left-nav { display: none; }

看看你能不能入侵模板引擎。

您也可以使用 jQuery，但它会创建 FOUC 效果，因为 jQuery 需要等待文档准备好才能确定元素是否存在，并且到那时浏览器可能已经呈现了侧边栏。您仍然可以使用 jQuery（参见 Adil 的回答）或替代方法：

/*
this should work best if placed after body start and
before navbar and not wrapped inside document.ready
it uses location.href so document.ready not required
*/
if (location.href.match(/products|categories/)) {
    $("body").addClass("hide-left-nav");
}

【讨论】：

感谢萨尔曼的回复。不幸的是，单个主模板控制了几乎所有元素，除了允许我使用其 GUI 动态添加内容的内容 div
你能在包含侧边栏的同一个容器中放置一个 HTML 元素吗？
侧边栏和内容窗格都包含在一个 div 中，但我不能静态添加任何内容到包含侧边栏的 div，只是内容区域。您可以检查我在 OP 中链接的页面。我可以使用内容 ID 访问 div。
Salman - 如果我默认隐藏侧边栏，然后在页面加载时运行 jquery 检测脚本，我不会遇到 FOUC 问题。对吗？
在这种情况下，您需要使用 jQuery 解决方案。我使用过 jQuery 和 CSS 方法，但是 jQuery 方法中的 FOUC 效果很烦人。是的，默认隐藏侧边栏可能比默认显示然后隐藏更好。

【解决方案5】：

试试下面的代码：

jQuery.fn.exists = function(){return this.length;}

if ($(selector).exists()) {
    // Do something
}

【讨论】：

【解决方案6】：

你也可以这样做

if ($(selector).is('*')) {
  // Do something
}

【讨论】：

【解决方案7】：

当然。 http://jsfiddle.net/LW5Bb/

nav = $('#leftNav');
toggle_button = $('#toggle_menu');
nav.hide();

toggle_button.on('click',function(){
    nav.toggle();
})

如果您决定根据其他项目的可见性显示/隐藏它...

if($('#your-item').is(':visible')) function(){ nav.toggle() })

或者干脆

if($('#your-item').is(':visible')) function(){ nav.show() })

如果你不想切换它。

【讨论】：