Question

我有一个有趣的问题，我似乎无法解决，也无法在网上或网上找到答案。直截了当地解决我的问题：

我正在为我的网站实施一个拉动标签，以提醒访问者一些信息以及我希望他们看到的链接。目前拉片工作正常，但问题在于锚。当我单击它时，当我右键单击并在新选项卡中打开时，它什么也没做，它会转到所需的URL。

我在带有绝对位置的div中有拉片，因此标签会伸出屏幕的左侧。这是我用来实现此功能的HTML和jQuery：

<div class="pop-out-notice">
    <div class="tab">
        <svg xmlns="http://www.w3.org/2000/svg" width="15px" height="100px">
            <rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="15px" height="100px" fill="rgb(187, 187, 187)" stroke="none"></rect>
            <text xmlns="http://www.w3.org/2000/svg" x="-0" y="0" fill="rgb(255, 255, 255)" font-size="17" style="text-anchor: end; dominant-baseline: hanging; cursor: pointer;" transform="rotate(-90)" text-rendering="optimizeSpeed">
                Pull This Tab
            </text>
        </svg>
    </div>
    <div class="content">
        <h3>60 Second Survey!</h3>
        Take a minute to help us tailor the library's website to better meet your needs:<br><br>
        <a href="[link here]">Click Here</a>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('.pop-out-notice .tab').click(function(){
            var popOutWidth = $('.pop-out-notice').css('left');
            if(popOutWidth === '0px'){
                $('.pop-out-notice').toggle(function(){
                    $(this).animate({'left': '-225px'}, 1000);
                }, function(){});
            }else if(popOutWidth === '-225px'){
                $('.pop-out-notice').toggle(function(){
                    $(this).animate({'left': '0px'}, 1000);
                }, function(){});
            }
        });
    });
</script>

如果有人对问题可能有什么建议或任何方法来清理此代码，我会非常乐意尝试一下。

感谢您的时间以及您可以给我的任何帮助/建议！

Answer 1

经过一些测试和进一步研究。我在上面的问题中解决了我的问题。我修复了链接问题，我已经清理了代码，所以它比以前简单得多。以下是我的更改已经回答了我的问题。

我使用animate类切换了我的代码，而是使用了一个新的CSS元素来使用toggleClass类，该元素模仿了我需要的动画。这是我改变的代码：

jQuery更改：

$(document).ready(function() {
    $('.pop-out-notice .tab').click(function(){
        $('.pop-out-notice').toggleClass('pop-out-toggle');
    });
});

CSS补充：

.pop-out-notice{
    ...
    transition: 1.75s;
}
.pop-out-toggle{
    left: 0px !important;
}

我确信我最初的，错综复杂的代码与所有错误和时髦的事情有很大关系。我希望这可以帮助其他任何偶然发现类似情况的人。

在pulltab中锚定不工作

1 个答案: