简体   繁体   English

下载菜单,如twitter和facebook实施的帖子

[英]Drop down menu for posts as like twitter and facebook implemented

I tried my best to implement a drop down menu as facebook and twitter does for their statuses but couldn't get the way. 我尽力实现一个下拉菜单,因为Facebook和Twitter为他们的状态做了但却无法顺利进行。 I did a lot of search but find no way. 我做了很多搜索,但没有办法。 Here is my Markup: 这是我的标记:

<div class="drop">
    <a href="#" class="dropDown">Menu</a>
    <div class="down">
        <ul>
            <li>Edit</li>
            <li>Delete</li>
        </ul>
    </div>
    <!-- Post here !-->
</div>


<div class="drop" id="1">
    <a href="#" class="dropDown">Menu</a>
    <div class="down" data-url='1'>
        <ul>
            <li>Edit</li>
            <li>Delete</li>
        </ul>
    </div>
    <!-- Post here !-->
</div>


<div class="drop">
    <a href="#" class="dropDown">Menu</a>
    <div class="down">
        <ul>
            <li>Edit</li>
            <li>Delete</li>
        </ul>
    </div>
    <!-- Post here !-->
</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript">
    $('.drop').drop();
</script>
<style type="text/css">
    .drop{
        display: inline-block;
        padding: 5px;
        background-color: #ddd;
        margin: 20px;
        cursor: pointer;
    }
    .down{
        display: none;

    }
</style>

I am using jQuery and here is the module: js.js 我正在使用jQuery,这里是模块: js.js

(function($){
    $.fn.drop = function(){
        this.each(function(){
            var self = $(this);
            self.on('click', function(){
                 $('.down').css('display', 'block');
            });
        });
    }
})(jQuery);

With this code when I click on any of the .drop element all of the .down elements are displayed. 有了这个代码,当我点击任何的.drop所有的元素.down元素的显示方式。 Sorry for any typos. 对不起打字错误。
Every suggestion will be appreciated. 每个建议都将不胜感激。

In script your selector is .down So, it will apply to all .down class Try to catch just child like this 在脚本中你的选择器是.down所以,它将适用于所有.down类试着抓住这样的孩子

(function($){
    $.fn.drop = function(){
        this.each(function(){
            var self = $(this);
            self.on('click', function(){
                 self.find('.down').css('display', 'block');
            });
        });
    }
})(jQuery);

I hope this will help you for now and in future. 我希望这对你现在和将来有所帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM