需要禁用节的超链接背景

Need to disable hyperlinked background for section

本文关键字：超链接 背景      更新时间：2023-09-26

有点傻，但知道足够危险。我正在使用一个非常偷工减料的Wordpress网站，并创建了这个特色的工作库部分，除了一个问题外，它运行良好：如果用户不小心点击了瓷砖后面的背景，所有东西都会消失。亲眼目睹：

http://neighboragency.com/#/what-我们做/

我知道为什么会发生这种情况，这是因为我已经将这个部分构建成了一个功能，在网站的其他部分，这种行为是首选的（请参阅"我们是谁"部分）。我希望能够做的是禁用背景作为这个特定部分的活动链接。该特定部分的代码如下。我希望有一些东西我可以应用到opening

  • 标签，禁用该背景？还是我要去挖掘其他文件？我对JQuery不太满意，所以希望它能在这段代码中以某种方式完成。提前感谢！ 
     <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控制台：

    1. 倾听你想要"窒息"的元素内部的点击声
    2. 当该事件发生时，通过对传递到处理程序函数的事件对象调用.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函数的延迟，但这就是事情变慢的原因。这没有必要，也可能没有帮助。

    如果我的答案解决了你的问题，请投赞成票。谢谢

    相关文章：