Javascript 关闭父div和ul-on-click，它们共享另一个on-click容器，但保留不需要的li_Javascript_Jquery_Css_Button

Javascript 关闭父div和ul-on-click，它们共享另一个on-click容器，但保留不需要的li

javascript jquery css button

Javascript 关闭父div和ul-on-click，它们共享另一个on-click容器，但保留不需要的li,javascript,jquery,css,button,Javascript,Jquery,Css,Button,我添加了一个跨度，覆盖了它应该关闭的容器。这样做很好，但如果单击此关闭范围，它将打开li并关闭父级span和ul，但保持li打开（尝试将li添加到.fadeout无效）。附加我的小提琴没有达到我预期的效果，因此我将在此处附加我的代码： JS HTML 代码不完整：未捕获引用错误：$recipePicContainer未定义我们无法猜测HTML的其余部分是什么样子。您说，“…父级span和ul但保持li打开…”我看不到正在创建ul或li的位置，也看不到$recipePicContainer是什

我添加了一个跨度，覆盖了它应该关闭的容器。这样做很好，但如果单击此关闭范围，它将打开li并关闭父级span和ul，但保持li打开（尝试将li添加到.fadeout无效）。附加我的小提琴没有达到我预期的效果，因此我将在此处附加我的代码：

HTML

代码不完整：

未捕获引用错误：$recipePicContainer未定义

我们无法猜测HTML的其余部分是什么样子。您说，“…父级span和ul但保持li打开…”我看不到正在创建

ul

或

li

的位置，也看不到

$recipePicContainer

是什么。抱歉，已尝试将其密度降低，我现在将在中编辑它

 var main = function () {

    var recipeArray = ['drink', 'firstCourse', 'mainDish', 'dessert'];
    var recipeArrayLength = recipeArray.length;
    for (var i = 0; i < recipeArrayLength; i++) {

        var $checkBoxes = document.createElement('div');
        $checkBoxes.setAttribute("class", "checkBoxes");
        var $recipePicContainer = document.createElement('span');
        $recipePicContainer.setAttribute("class", "recipePicContainer");



        function makeRecipePic() {

            var recipe = document.createElement("IMG");
            recipe.setAttribute("src", "../images/grasshopper-cocktail.jpg");
            recipe.setAttribute("class", "recipe");
            $recipePicContainer.appendChild(recipe);
        }
        var $deleteRecipe = document.createElement('span');
        $deleteRecipe.setAttribute("class", "fa fa-times-circle", "aria-hidden", "true");
        $recipePicContainer.appendChild($deleteRecipe);

        $($deleteRecipe).click(function(){
            $(this).parents('span', 'ul').fadeOut();
        });

        makeRecipePic();

        var mainContainer = document.getElementsByClassName('mainContainer');
        mainContainer[0].appendChild($checkBoxes);

        var $div = document.createElement('div');
        $div.innerHTML = 'CockTails';
        $recipePicContainer.appendChild($div);
        $checkBoxes.appendChild($recipePicContainer);

        var $recipes = document.createElement("ul");
        var $checkboxes = document.getElementsByClassName('checkBoxes');

        var x = document.createElement("INPUT");
        x.setAttribute("type", "checkbox");

        for (var j = 1; j <= 6; j++) {
            var li = document.createElement("li");
            li.className = "ingredients";
            li.setAttribute("type", "checkbox");


            var a = document.createElement("a");
            a.innerHTML = "Ingredient " + j;

            li.appendChild(a);
            $recipes.appendChild(li);
        }
        var b = document.createElement("li");
        li.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
        li.className = "Instructions";

        $checkboxes[i].appendChild($recipes);
    }
    $('.recipes').hide();
    $('<input type="checkbox" value="1" />').prependTo(".ingredients");
    $('.mainContainer .recipePicContainer').click(function () {
        $(this).next('ul').toggle("slow").toggleClass('selected');

    });
};
$(document).ready(main);

.fa-times-circle:before {
    content: "\f057";
    position: relative;
    left: 28px;
    bottom: 125px;
    color: white;
    -webkit-text-stroke: 1px black;
 }

<body>

<div class="mainContainer col-md-12 col-xs-12">

</div>

</body>