Question

我添加了一个覆盖它应该关闭的容器的跨度。它做得很好，但是如果我单击这个结束跨度，它会打开li并关闭父跨度和ul但保持li打开（尝试将li添加到.fadeout不起作用）。附上我的小提琴并没有出现我的预期，所以我会在这里附上我的代码：

JS

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

CSS

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

HTML

<body>

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

</div>

</body>

关闭点击容器上的另一个父div和ul，但保留不需要的li

0 个答案: