javascript - 如何使用 jquery 调用单个下拉列表到每个元素

Question

我正在使用 jquery 任务，我在那个编辑和删除按钮中有聊天任务，当单击我需要调用该下拉列表的每个元素编辑时，必须出现在下拉列表中。如何调用每个元素附近的下拉菜单。

我在这篇文章中附上了我的代码

HTML

 <div class="chatApp">
<ul class="dropdown">
    <li>Edit</li>
    <li>Delete</li>
</ul>
    <div class="chatMessage">
        <div class='singleMessage'><p>Hii how are you<div class='move-   right'><span class='showdropdown'>...</span></div></p></div>
<div class='singleMessage'><p>I am fine<div class='move-right'><span     class='showdropdown'>...</span></div></p></div>
    </div>
    <div class="chatInput">
        <textarea rows="5" id="message" data-funt=""></textarea>
        <input type="button" value="Send" onclick="sendMessage();">
    </div>
</div>

JavaScript :

$('.showdropdown').on('click', function (){
    var offleft = $(this).offset().left;
    var dependleft = $('.dropdown').offset().left;
    var offtop = $(this).offset().top;
    var dependtop = $('.dropdown').offset().top;
    var left = offleft - dependleft;
    var top = offtop - dependtop;

    $('.dropdown').css({
        'left': left,
        'top' : top
    });
    console.log(offtop);
    console.log(dependtop);
    $('.dropdown').show();
});

CSS:

.chatApp{
border: 1px solid #ddd;
height: 600px;
padding: 10px;
background-color: #fff;
position: relative;
}
.chatMessage{
border: 1px solid #ddd;
min-height: 500px;
overflow-y:scroll;
}
.chatInput{
height: 100px;

}
.chatInput textarea{
width:100%;
}

.chatMessage .singleMessage{
padding: 81px 5px;
font-size: 13px;
height: 150px;  
}

.chatMessage .singleMessage .move-right span.edit{
border: 1px solid #ddd;
padding: 10px 15px;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
}

.chatMessage .singleMessage .move-right{
float: right;
}

.chatMessage .singleMessage .move-right span.delete{
border: 1px solid #ddd;
padding: 10px 15px;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
 }

.dropdown {
display: none;
border: 1px solid #ddd;
position: absolute;
top: 0;
left: 0;
box-shadow: 0px 1px 1px 0px #777;
 }

.dropdown li{
padding: 5px 15px;
text-align: center;
 }

是否可以通过单个下拉列表来调用每个元素？帮我解决这个任务

Answer 1

解决方案

注意:这个 jsfiddle 可以工作，但必须在 CSS 中设置正确的下拉列表位置

这些是 3 个步骤:

1. 所以将类添加到<p>然后用onclick绑定(bind)

2. 而不是使用 <ul class="dropdown">使用 <select>带着 child <option>

3. 这样你就可以做到这一点

$('p').on('click', function(){
 
	$(this).addClass(function() {
        var addedClass = 'showdropdown';

        var offleft = $(this).offset().left;
        var dependleft = $('.dropdown').offset().left;
        var offtop = $(this).offset().top;
        var dependtop = $('.dropdown').offset().top;
        var left = offleft - dependleft;
        var top = offtop - dependtop;

        $('.dropdown').css({
            'left': left,
            'top' : top
        });
        console.log(offtop);
        console.log(dependtop);
        $('.dropdown').show();
        return addedClass;
	});
});

.chatApp{
border: 1px solid #ddd;
height: 600px;
padding: 10px;
background-color: #fff;
position: relative;
}
.chatMessage{
border: 1px solid #ddd;
min-height: 500px;
overflow-y:scroll;
}
.chatInput{
height: 100px;

}
.chatInput textarea{
width:100%;
}

.chatMessage .singleMessage{
padding: 81px 5px;
font-size: 13px;
height: 150px;  
}

.chatMessage .singleMessage .move-right span.edit{
border: 1px solid #ddd;
padding: 10px 15px;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
}

.chatMessage .singleMessage .move-right{
float: right;
}

.chatMessage .singleMessage .move-right span.delete{
border: 1px solid #ddd;
padding: 10px 15px;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
 }

.dropdown {
display: none;
border: 1px solid #ddd;
position: absolute;
top: 0;
left: 0;
box-shadow: 0px 1px 1px 0px #777;
 }

.dropdown li{
padding: 5px 15px;
text-align: center;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="chatApp">
 <select class="dropdown">
    <option>Edit</option>
    <option>Delete</option>
</select> 
    <div class="chatMessage">
        <div class='singleMessage'><p>Hi how are you<div class='move-   right'><span>...</span></div></p></div>
<div class='singleMessage'><p>I am fine<div class='move-right'><span>...</span></div></p></div>
    </div>
    <div class="chatInput">
        <textarea rows="5" id="message" data-funt=""></textarea>
        <input type="button" value="Send" onclick="sendMessage()" id="btn">
    </div>
</div>