有点傻,但知道足够危险。我正在使用一个非常偷工减料的Wordpress网站,并创建了这个特色的工作库部分,除了一个问题外,它运行良好:如果用户不小心点击了瓷砖后面的背景,所有东西都会消失。亲眼目睹:
http://neighboragency.com/#/what-我们做/
我知道为什么会发生这种情况,这是因为我已经将这个部分构建成了一个功能,在网站的其他部分,这种行为是首选的(请参阅"我们是谁"部分)。我希望能够做的是禁用背景作为这个特定部分的活动链接。该特定部分的代码如下。我希望有一些东西我可以应用到opening
<ul id="list-members">
<?php
//The Query
$items = get_posts('cat=6');
$count = count($items);
$cnt = 0;
//The Loop
if ( $count > 0 ) : foreach($items as $item) :
setup_postdata($item);
$custom_values = get_post_meta($item->ID, 'position', true);
?>
<li>
<div class="entry-content">
<div class="entry-content-col1">
<div class="list-detail">
<?php the_content();?>
</div>
</div>
</div>
</li>
<?php
$cnt++;
endforeach;
endif;
?>
</ul>
每当发生类似"点击"的事件时,您都可以监听它,检查有关它的信息,然后根据信息采取一些操作。由于您已经在使用jQuery,请查看jQueryEvent对象的API文档-如果您设置了一个侦听器来查找它,那么所有这些信息都是可用的
对于您的特定页面,几乎可以肯定有更优雅的解决方案,但一种直接的方法是倾听有问题区域的点击,并防止该事件传播。
因此,对于一个非常基本的解决方案,加载您的页面并将其输入JS控制台:
- 倾听你想要"窒息"的元素内部的点击声
- 当该事件发生时,通过对传递到处理程序函数的事件对象调用.prventDefault()来阻止其传播
$("ul#list-members .entry-content-col1").click(function (e) { e.preventDefault(); return false; });
上述解决方案不太好,因为它针对多个领域。如果你能为标记添加一些特殊性,比如给你关心的区域一个唯一的类或ID名称,那么你就能更有效地针对它。
在自定义JS文件中,有一个函数使用选择器#列表成员。这在"我们是谁"部分很好,但在"我们做什么"部分,相同的选择器是目标。我建议使用一个只出现在"我们做什么"部分的不同选择器。请尝试将第120行上的选择器更改为更具体的选择器,如下所示。
$('#post-6 #list-members li').on('click', function(){
var arrow = $(this).find('.entry-content-arrow');
if( $(this).find('.toggle-down').length > 0 ) {
$(this).find('.list-info').slideUp('slow');
$(this).find('.list-detail').slideDown(500, function(){
arrow.removeClass('toggle-down').addClass('toggle-up');
changeInteriorH(2);
if($(this).find('p:first').is(':empty')){
$(this).find('p:first').remove();
}
});
} else {
$(this).find('.list-info').slideDown('fast');
$(this).find('.list-detail').slideUp(500, function(){
arrow.removeClass('toggle-up').addClass('toggle-down');
changeInteriorH(2);
});
}
});
对于您的CSS更改:看起来有两种CSS样式意味着该区域是可点击的。在style.css的887行,你会看到
#list-members li:hover {
background-color: #4D3A2B;
}
你需要让它更加具体,就像我们对你的JS所做的那样。尝试
#post-6 #list-members li:hover {
background-color: #4D3A2B;
}
为您的选择器。在同一文件的第860行更改
#list-members li,
#list-partners li {
至
#post-6 #list-members li,
#post-6 #list-partners li{
使得光标不会出现在背景上。
我不知道你为什么改变上面JS函数的延迟,但这就是事情变慢的原因。这没有必要,也可能没有帮助。
如果我的答案解决了你的问题,请投赞成票。谢谢