锚html (<a>)只适用于右击，而不是左击

Anchor html (<a>) just works for right click not left click

本文关键字：右击 左击 适用于 html      更新时间：2023-09-26

我有一个锚标记如下，不工作的左键点击。目前，用户需要右键点击它才能打开它，因为左键点击不起作用。一旦我左键点击链接，被点击的锚的<li>的display样式就会改变。

问题:点击下载pdf>点击示例1(不工作)

<html>
<head>

<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
        <ol class="myList">
            <li class="showList"><a href=""><img
                    src="http://www.example.com/image.png" />Download PDFs</a>
                <div class="pdfFiles">
                    <ol>
                        <li><a href="http://www.example.com/sample1.pdf"><i
                                class="fa fa-file-pdf-o f24"></i> Sample 1</a>
                            <div class="pdfSize">10MB</div></li>
                    </ol>
                </div>
            </li>
         </ol>
</body>
<style>
.myList {
    list-style-type: none;
}
.myList>li {
    padding-top: 1%;
}
.myList li.showList {
    background: -moz-linear-gradient(center top, GhostWhite, #aca696) repeat
        scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 20px;
    height: auto;
    width: 100%;
}
.myList li .pdfFiles {
    transition: all 1.5s ease 0s, visibility 0s linear 0.5s;
    /* the last value is the transition-delay for visibility */
    display: none;
    height: auto;
}
.myList li .pdfFiles li {
    height: 32px;
    line-height: 36px;
    vertical-align: middle;
    padding-left: 20px;
    list-style-type: none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px
}
.myList li .pdfFiles li a {
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
}
.pdfSize {
    line-height: 26px;
    font-size: 12px;
    height: 26px;
    border-radius: 10px;
    float: right;
    padding: 0px 10px 0 10px;
    margin-top: 2px;
}
</style>
<script>
    $('.showList a').click(function() {
        $('pdfFiles').hide();
        $(this).siblings().toggle();
        return false;
    })
</script>
</html>

地址有http://

问题在于你的jQuery。您正在使用锚标记来切换兄弟div，但您没有将选择限制为仅第一个锚标记。所以，当你点击PDF文件下载时，它会再次切换脚本。

修改你的脚本:

 $('.showList a:first').click(function() {
        $('pdfFiles').hide();
        $(this).siblings().toggle();
        return false;
    })

这是一个工作的CodePen演示。

这感觉像是我一定错过了一些基本的东西，但是:

<a href="www.example.com/sample1.pfg">

不能工作。因为它没有协议前缀(例如。"http://")，浏览器将把它解释为一个相对链接，并尝试从当前位置获取具有该路径的页面，而不是从example.com。

编辑:正确的语法应该是:<a href="http://www.example.com/sample1.pfg">-当然，假设在那个位置真的有这样一个文件。

右击是如何工作的，但是，我不知道如何解释。

相关文章：