Question

在我的每个投资组合项目中，我有一个与顶部重叠的div，其不透明度设置为零。当用户将鼠标悬停在一个项目上时（或者在移动设备的情况下，点击一个项目），div会转换为不透明度：1。我的问题是，如果用户点击位于此div中的任何锚标记（.portfolio-在他们有机会看到链接之前，它会将他们带离页面（此时href =＆＃34;＃＆＃34;因此它刷新页面）。

我的解决方法是在每个锚标记中添加一个禁用类（感谢下面的Stephen Thomas），然后使用jquery .hover（）函数删除该类。不幸的是，如果同时点击锚标签到悬停（就像在移动设备上）那么它仍然会刷新页面，因为我认为JQuery太快删除了这个类。

为了解决这个问题，我试图在我的处理程序中使用setTimeout函数，但它不再从我的锚元素中删除隐藏的类，即使仍在调用该超时函数中的console.log。

我不确定为什么同一行代码只是因为有超时功能而无效。如果有更好的方法来完成我想要做的事情，请告诉我。

编辑：

我正在重写这个更清楚，并且包含了一个codepen。我的问题出现在手机屏幕尺寸上，因此您需要在他们或检查员上查看。

https://codepen.io/colesam/full/NvLBPL/

HTML

<div class="full-page" id="portfolio-page">
    <div class="row">
        <div class="col-12">
            <h2 class="center-text">My Portfolio</h2>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="">
            <!-- offset col -->
        </div>
        <div class="col-12" id="portfolio-items">
            <div class="row">
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text" id="test">
                            <h4>Wireframes</h4>
                            <a href="#" class="disabled">View</a>
                        </div>
                    </div>
                </div>        
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a href="#">View</a>
                        </div>
                    </div>
                </div> 
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a href="#">View</a>
                        </div>
                    </div>
                </div> 
            </div>
        </div>        
    </div>
</div>

jquery的

$(document).ready(function() {    
    //  PORTFOLIO EVENT LISTENERS
    $('.portfolio-text').hover(
        function() {    //  hover on function
            setTimeout(function() {console.log('test'); $(this).children('a').removeClass('disabled');}, 50);
        },

        function() {    //  hover off function
            $(this).children('a').addClass('disabled');
        }
    );
});

Answer 1

听起来像是this上下文的问题，并且它在你的闭包内超出了范围。为什么不尝试：

$('.portfolio-text').hover(function() {
    var $that = $(this);  // <--- HERE
    setTimeout(function() {
        // here 'this' is in a different context/scope
        $that.children('a').removeClass('disabled'); // USE HERE
    }, 50);
}, function() {
    $(this).children('a').addClass('disabled');
});

或者，您可以使用以下内容阻止这些点击：

$('.portfolio-text').find('a:not(:visible)').on('click', function(e) {
    e.preventDefault();
    return false;
});

也许从这开始，并从那里开始构建。

希望这有帮助。

Answer 2

听起来你正在描述一个网站导航菜单，如果是这样，你为什么要打扰jquery？您需要查看父子关系，父子div应该在子元素悬停时保持激活状态。我可以为您提供一些代码，但首先我需要确保您正在谈论菜单/导航，或者它是否像幻灯片一样......

Answer 3

您可以在桌面上执行Ajax并使用移动设备上的链接。只是在第一次移动点击事件（或通过触摸图像模拟悬停事件）之后才能使链接可点击，这使链接可见。

这是基本的想法。当url为链接创建一个href attrib时，使用data-href作为url ...当他们取消链接时从链接中删除href属性，即href =“”。现在它适用于移动设备，并且不会破坏桌面（因为您可以在悬停后单击链接）。

<script>
$(document).ready(function() {    
    //  PORTFOLIO EVENT LISTENERS
    $('.portfolio-text').hover(
        function() {    //  hover on function
        $(this).children('a').removeClass('disabled');
        // if mobile code
            $(this).children('a').attr("href", $(this).children('a').data( "href" ))
        // else
        // do ajax to get data to desktop browser divide ... the data is located at $(this).children('a').data( "href" ) for ajax.      
        },
    );
});
</script>

<div class="full-page" id="portfolio-page">
    <div class="row">
        <div class="col-12">
            <h2 class="center-text">My Portfolio</h2>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="">
            <!-- offset col -->
        </div>
        <div class="col-12" id="portfolio-items">
            <div class="row">
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text" id="test">
                            <h4>Wireframes</h4>
                            <a data-href="wireframe.html" class="disabled">View</a>
                        </div>
                    </div>
                </div>        
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a data-href="portfolio2.html" >View</a>
                        </div>
                    </div>
                </div> 
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a data-href="portfolio2.html" >View</a>
                        </div>
                    </div>
                </div> 
            </div>
        </div>        
    </div>
</div>

需要帮助使用JQuery来防止点击隐藏的锚标记

3 个答案: