javascript 根据页面上是否存在元素有条件地隐藏div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21383606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conditionally hide div based on if element is present on page
提问by Alex Ritter
I am trying to figure out the best way to hide/show a left hand navigation menu on my volusion store.
我试图找出在我的 volusion 商店中隐藏/显示左侧导航菜单的最佳方法。
Would it be possible via javascript/jquery to change the css display type of a div based on weather another element is present on the page?
是否可以通过 javascript/jquery 根据天气更改 div 的 css 显示类型，页面上是否存在另一个元素？
The reason I ask is that the templating of this software is a bit convoluted. There is only a single skin file for the entire site. If I want the left hand navigation to load at all, it must be in the skin file. If it's in the skin file, it will load on every page but the homepage.
我问的原因是这个软件的模板有点复杂。整个站点只有一个皮肤文件。如果我想要加载左侧导航，它必须在皮肤文件中。如果它在皮肤文件中，它将加载到除主页之外的每个页面上。
Because this is e-commerce software, I can easily add/remove content and elements from my informational pages, but the product and category pages load dynamically. I want to show the left hand menu on my info pages, but hide it on my product/category pages.
因为这是电子商务软件，所以我可以轻松地从信息页面添加/删除内容和元素，但产品和类别页面会动态加载。我想在我的信息页面上显示左侧菜单，但在我的产品/类别页面上隐藏它。
Which brings me back around to my original question. Since I am able to easily add an html element to my info pages, could I simply add a <br class="show-left-nav" />to the page to trigger a javascript css change?
这让我回到了我最初的问题。由于我可以轻松地将 html 元素添加到我的信息页面，我可以简单地<br class="show-left-nav" />向页面添加一个来触发 javascript css 更改吗？
http://xlevj.jyetp.servertrust.com/contact-us_a/286.htm
http://xlevj.jyetp.servertrust.com/contact-us_a/286.htm
Thanks!
谢谢！
回答by Mohammad Adil
Yes !
是的 ！
if($('.someElement').length){ // returns true if element is present
// show or hide another div
$('.otherElement').hide();
}
回答by Gabriele Petrioli
If you have access to the div with id="content"then add the element at the start of it.
如果您有权访问 div，id="content"则在它的开头添加元素。
<div id="content">
<br class="show-left-nav" />
<div id="content_area"></div><!--Already exists-->
<div id="leftNav"></div><!--Already exists-->
</div>
and in your CSS add
并在你的 CSS 添加
.show-left-nav{display:none;}
#leftNav{display:none;}
.show-left-nav ~ #leftNav{display:block;}
the ~is the general sibling selector
的~是一般兄弟选择
回答by Salman A
If it is possible to add a class somewhere upthe hierarchy (e.g. on body tag) then you can control the sidebar display using:
如果可以添加类的地方了层次结构（例如，在身体标记），那么你可以使用控制侧边栏显示：
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; }
See if you can hack into the template engine.
看看您是否可以入侵模板引擎。
You can use jQuery too but it will create a FOUCeffect because jQuery needs to wait for document ready in order to determine if the element is present and by that time the browser may have rendered the sidebar. You can still use jQuery though (see Adil's answer) or an alternate:
您也可以使用 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");
}
回答by user2481985
Pretty Straight forward I'd say.
我会说得非常直截了当。
#sidebar {display:none;}
javascript:
javascript:
var conditionalEl = document.getElementById("TestId");
var sidebar = document.getElementById("sidebar");
if(typeof(conditionalEl) !== undefined){
sidebar.style.display = "block";
}
jQuery:
jQuery：
if($("#TestId")){
$("#sidebar").show();
}
回答by user2481985
Try the below code:
试试下面的代码：
jQuery.fn.exists = function(){return this.length;}
if ($(selector).exists()) {
// Do something
}
回答by user2481985
You can also do the samething by
你也可以做同样的事情
if ($(selector).is('*')) {
// Do something
}
回答by Casey Dwayne
Sure. http://jsfiddle.net/LW5Bb/
nav = $('#leftNav');
toggle_button = $('#toggle_menu');
nav.hide();
toggle_button.on('click',function(){
nav.toggle();
})
If you're dead set on having it show/hide depending on another item's visibility...
如果您决定根据另一个项目的可见性来显示/隐藏它...
if($('#your-item').is(':visible')) function(){ nav.toggle() })
or simply
或者干脆
if($('#your-item').is(':visible')) function(){ nav.show() })
if you don't want to toggle it.
如果你不想切换它。
