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

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

是否可以通过javascript/jquery根据页面上是否存在其他元素来更改div的css显示类型

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

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

这让我回到了我最初的问题。由于我能够轻松地向信息页面添加html元素，我是否可以简单地向页面添加一个

来触发javascript css更改

谢谢

是的

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

---

如果可以在层次结构的某个位置添加类（例如，在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，但它会产生效果，因为jQuery需要等待documentready，以确定元素是否存在，到那时浏览器可能已经呈现了侧栏。您仍然可以使用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");
}

---

我想说得很直截了当

#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();
}

请尝试以下代码：

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

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

---

如果您可以使用

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>

---

~

是您也可以通过

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

当然

如果你死心塌地想让它根据另一个项目的可见性显示/隐藏

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

或者干脆

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

---

如果您不想切换它。

是的，这是可能的。不过，您可能不应该使用不相关的HTML，而是应该向相关的内容添加一个类。好电话。谢谢你的回复，萨尔曼。不幸的是，除了允许我使用GUI动态添加内容的content div之外，单主模板几乎控制了所有元素。您可以将HTML元素放在包含侧边栏的同一容器中吗？侧边栏和内容窗格都包含在一个div中，但是我不能静态地向包含侧边栏的div添加任何内容，只添加内容区域。您可以firebug检查我在OP中链接的页面。我可以使用content.Salman的id访问div内部。如果我在默认情况下隐藏侧栏，然后在页面加载时运行jquery detect脚本，我就不会有FOUC问题。正确吗？在这种情况下，您需要使用jQuery解决方案。我使用过jQuery和CSS方法，但jQuery方法中的FOUC效果令人讨厌。是的，默认情况下隐藏侧边栏可能比默认情况下显示要好，所以我正确地理解了这一点，这段脚本将检测页面上是否存在类，如果存在，它将隐藏元素？我认为这是相反的。我需要元素detect来显示类是否存在，然后默认隐藏@是的！那只是为了证明。。您可以将其更改为

.show（）

。或者您可以使用

else

工作出色。谢谢穆罕默德-又一个简短的问题。如果检测到元素，我还需要这段脚本来更改div的宽度。“content_area”的div id需要由该脚本动态添加760px的宽度。帮助？@AlexRitter

$（'content_area'）。宽度（'760'）

leftNav将是content_区域的兄弟；因此，它不可能是content#u area的孩子的兄弟姐妹。这将是完美的，除非我只能访问content#u area，它是content#u area的孩子，但不是content#u area的兄弟姐妹#leftNav@AlexRitter啊，对不起。。。您在另一条评论中提到，您可以使用id内容访问div。。现在，对于

#content_区域

，您只能访问其内容，对吗？或者您可以将类添加到

#content_区域

本身吗？

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

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