javascript - 如何将子菜单添加到单击的按钮

Question

我有这样的下拉列表:

由几个按钮组成。单击这个标记的按钮中的任何一个，子菜单应该出现，其中包含我通过 AJAX 获得的一些数据。 .所以，最终它应该是这样的:

这是我的下拉代码:

<ul class="dropdown-menu">
                <?php
                foreach($applications as $application){

                echo "<li><button type='button' style='width:100%;' value='".$application['facebook_id']."' onclick='setSession(this.value);'>".$application['app_name']."</button></li>";

                } ?>
                <?php if($resultForUpperQuery){
                echo '<hr>';
                while($names=$resultForUpperQuery->fetch_assoc()){
                $groupname=$names['ime_grupe'];
                echo "<li><button type='button' style='width:100%;' value='".$groupname."' onclick='showDetails(this.value);'>".$groupname."</button></li>";
                }
                echo '<hr>';
                }
                ?>
                <?php if(isset($_SESSION['ap_id'])){
                echo '
                <li><a href="" data-target="#createAppGroup" data-toggle="modal">Create App Group</a></li>';}?>
                <li><a href="app_setup.php">Add new app</a></li>
    </ul>

所以每个按钮都有onclick="showDetails(this.value)"看起来像这样的函数:

function showDetails(o){

            var data    = {};
            var groupName = o;

            data.action2='showConsistsOf';
            data.groupName=groupName;
            $.ajax({
                url: "../includes/adapter.php",
                type: "POST",
                dataType: "JSON",
                data: data,
                async: true,
                success: function (data) {
                    if(data){
                        //console.log(data);
                        for(var i=0;i<data.length;i++){
                        $('button[value=groupName]').append('<li>+data[i]+</li>');
                        }
                    }
                    else {

                    }
                }
            });
        }

检索到的数据如下所示:

["Notiflow", "Konfidence Hrvatska"]

所以，它基本上是一个数组，其值应该是子菜单下拉列表的一部分。我试着把这个子菜单做成这样，你也可以从上面的代码中看到:

success: function (data) {
    if(data){
        console.log(data);
        for(var i=0;i<data.length;i++){
            $('button[value=groupName]').append('<li>+data[i]+</li>');
        }
    }
}

因此我尝试附加数据中的 foreach 值 <li>点击触发功能的按钮。但是单击按钮只会关闭下拉菜单。真的不知道如何解决这个问题。

Answer 1

试着像这样调用你的函数:

$(".dropdown-menu").on("click", ".button", function() {.......} );