Question

I have an anchor tag as following that does not work for left click. At present, users need to right click on it to open it because left click does not work. Once I left click on the links the display style of <li> of the clicked anchor gets changed.

Issue: Click on Download PDFs > Click on Sample 1 (does not work)

<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>

The address has http://

Answer 1

这感觉就像我必须缺少的一些东西，但是：

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

无法正常工作。因为它没有协议前缀（例如“http：//”），所以浏览器会将其解释为相对链接，并尝试从其当前位置开始，而不是从example.com获取具有该路径的页面

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

如何点击右击，我无法解释。

Answer 2

问题在于你的jQuery。您正在使用锚标记切换同级div，但您不会将选择限制为仅第一个锚标记。因此，当您单击要下载的PDF文件时，它会再次切换脚本。

将您的脚本更改为：

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

这是 working CodePen demo 。

锚定html（<a>) just works for right click not left click

2 个答案: