Question

我有一个列表，我试图崩溃，一旦我在层次结构中降低，我就遇到了麻烦。这是我的HTML：

<ul class="list">
    <li>
        <a>Categories</a>
        <ul>
            <li>
                <a>Parent</a>
                <ul>
                    <li><a>Child</a></li>
                    <li><a>Child</a></li>
                    <li><a>Child</a></li>
                </ul>
            </li>  
            <li>
                <a>Parent</a>
                <ul>
                    <li><a>Child</a></li>
                    <li><a>Child</a></li>
                    <li><a>Child</a></li>
                </ul>
            </li>  
            <li>
                <a>Parent</a>
                <ul>
                    <li><a>Child</a></li>
                    <li><a>Child</a></li>
                    <li><a>Child</a></li>
                </ul>
            </li>  
            <li>
                <a>Parent</a>
                <ul>
                    <li><a>Child</a></li>
                    <li><a>Child</a></li>
                    <li><a>Child</a></li>
                </ul>
            </li>            
        </ul>                
    </li>
</ul>

继承我的jquery

$( document ).ready(function() {
    $('.list > li a').click(function(){
        $(this).parent().find('ul').toggle();
    });
});

这是一个jfiddle：http://jsfiddle.net/u7bczqup/

点击“类别”后，“父母”会退出。发生这种情况时，父母的所有孩子都会被展示而不是隐藏。为什么这些不隐藏？我试过调整我的jquery，但这导致它根本不起作用。

Answer 1

给这一点。

JS：

$( document ).ready(function() {
    $('.list > li a').click(function(){
    $(this).next('ul').toggle();
    });
});

使用.find()的问题在于它找到了所有ul元素。您可以通过添加以下行来检查：console.log($(this).parent().find('ul'));这将打印所有ul标记＆＃34;查找＆＃34;到控制台。因为它找到了所有这些，所以它正在切换所有这些。

Answer 2

它们没有被隐藏，因为jquery找到它下面的任何后代，然后你切换它们，你应该使用children（）。

试试这个：

$(this).parent().children('ul').toggle();

http://jsfiddle.net/u7bczqup/1/

https://api.jquery.com/children/

Answer 3

您正在搜索直接后代的方法.find（'ul'）中的所有无序列表元素。它应该是.find（'ul：first-child'）更准确地说。儿童（ul：first）所以它会是

## helper functions
trunc <- function(x,...) UseMethod('trunc');
trunc.default <- function(x,...) base::trunc(x,...);
trunc.POSIXt <- function(x,unit='sec',num=1) { u <- sub(perl=T,'(?<=.)s$','',unit); base::trunc.POSIXt(x,u) - as.integer(format(x,c(sec='%S',second='%S',min='%M',minute='%M',hour='%H',day='%d')[u]))%%num*unname(c(sec=1,second=1,min=60,minute=60,hour=3600,day=86400)[u]); };

ceiling <- function(x,...) UseMethod('ceiling');
ceiling.default <- function(x,...) base::ceiling(x);
ceiling.POSIXt <- function(x,unit='sec',num=1) { u <- sub(perl=T,'(?<=.)s$','',unit); trunc.POSIXt(x-.Machine$double.base^(as.integer(log2(as.double(x)))-.Machine$double.digits+1L),unit,num) + num*unname(c(sec=1,second=1,min=60,minute=60,hour=3600,day=86400)[u]); };

## define plot parameters
xtick.first <- trunc(min(dd2$start),'hour');
xtick.last <- ceiling(max(dd2$end),'hour');
xtick <- seq(xtick.first,xtick.last,'10 min');
xtick.range <- as.double(difftime(xtick.last,xtick.first,unit='secs'));
xmin <- xtick.first - xtick.range*20/100;
xmax <- xtick.last + xtick.range*5/100;
xlim <- c(xmin,xmax);
ydiv <- 0:nrow(dd2);
ytick <- nrow(dd2):1-0.5;
ymin <- ydiv[1];
ymax <- ydiv[length(ydiv)];
ylim <- c(ymin,ymax);
line.grey <- 'grey';
bg.grey <- '#dddddd';
bg.white <- 'white';

## plot
par(xaxs='i',yaxs='i',mar=c(5,1,1,1));
plot(NA,xlim=xlim,ylim=ylim,axes=F,ann=F);
rect(xmin,(ymax-1):ymin,xmax,ymax:(ymin+1),col=c(bg.white,bg.grey),border=NA);
with(expand.grid(y=ytick,x=xtick),segments(x,y+0.5,x,y-0.5,col=rep(c(line.grey,bg.white),len=length(ytick))));
abline(h=ydiv,lwd=2,col=line.grey);
abline(v=xlim,lwd=2,col=line.grey);
barheight <- 0.75;
with(dd2,rect(start,ytick-barheight/2,end,ytick+barheight/2,col=rainbow(nrow(dd2)),border=NA));
xtick.ishour <- c(T,format(xtick[-1],'%M')=='00');
text(xtick,0,pos=1,ifelse(xtick.ishour,format(xtick,'%H:%M'),format(xtick,':%M')),font=ifelse(xtick.ishour,2,1),xpd=NA);
text(xtick.first,ytick,pos=2,dd2[,data]);
text(dd2[,end],ytick,pos=4,dd2[,data]);

更多请参阅

使用jquery折叠列表

3 个答案: