Question

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

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

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

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

这让我回到原来的问题。由于我能够轻松地将html元素添加到我的信息页面，我可以简单地向页面添加<br class="show-left-nav" />以触发javascript css更改吗？

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

谢谢！

Answer 1

是的！

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

Answer 2

如果可以在 up 层次结构中添加一个类（例如在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");
}

Answer 3

相当直接我会说。

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

Answer 4

如果您可以使用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

Answer 5

请尝试以下代码：

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

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

Answer 6

你也可以通过

做同样的事情

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

Answer 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() })

如果您不想切换它。

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

7 个答案: