We Keep Coding

How to custom dropdown with js inside loop?

I'm making a forum web site(html+Vue3+php+sql), and there have a post system.
Mostly, when we need to custom dropdown object, it always needs to initial the fake dropdown object with js. (or have the other way that IDK)
for example, I'm using the css framework「Tocas-UI」,and I got the some html objects below:
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
And <div class="ts floating dropdown icon button">...</div> can be used js ts('.ts.dropdown:not(.basic)').dropdown(); to make it be a "dropdown" object.
Although it can only be used once to initial every object which have class .ts.dropdown, but I'm using the js framework Vue3, and when I using v-for to render every post (have one fake dropdown object in every post), it's not working on the object which are be created after I call the function .dropdown().
So I was tried to put ts('.ts.dropdown:not(.basic)').dropdown(); into loop, it stupid and also not working.
Here is the code in the v-for loop:
<template v-for="post in posts">
<div class="item">
<div class="ts mini circular image">
<img src="default.png">
</div>
<div class="content">
<div class="header">{{ post.poster.nickname || post.poster.username }}</div>
<div class="middoted meta">
<a>#{{ post.poster.username }}</a>
<div>{{ Init.timeToStatus(post.datetime) }}</div>
</div>
</div>
<div class="actions">
<div class="ts separated secondary icon buttons">
<div class="ts floating dropdown icon button">
<i class="vertical ellipsis icon"></i>
<div class="menu">
<div class="item">Add</div>
<div class="item">Edit</div>
<div class="item">Share</div>
</div>
</div>
</div>
</div>
</div>
</template>
So the question is... How can I make those fake dropdown object be initial with ts('.ts.dropdown:not(.basic)').dropdown(); even have new post be added after page loaded.

collapsing a variable number of elements that contain child elements

I have a web app that displays short stories, and gives a text summary for each chapter of that short story.
The elements that contains the story is sortable within the parent div of class "stories".
Additionally, the elements that contain the chapter summaries are also sortable within the parent div of class "chapters".
This sorting is done using a jQuery plug-in.
However, I would like to add a react, vue, or even jQuery plugin that allows the parent element of each book to be collaspable.
I did try jQuery accordian, but that only allows one element to be open at any given time.
I then tried a react library called react-sortable-hoc, found here: https://github.com/clauderic/react-sortable-hoc
However, when implemented, broke the sorting ability of my stories and chapter summaries.
So I was wondering if anyone could reccomend a library/component that can collapse a dynamic number of elements that contain child elements.
Here is an example of what my HTML looks like:
<div class="stories sortable">
<div class="storySummary">
<div class="card">
<div class="card-header shortStoryTitle collapsable">To Build a Fire</div> <!-- desired functionality: collapse when clicked -->
<div>
<div class="chapters sortable">
<div class="chapterSummary">
Chapter Summary Text for Chapter #1
</div>
<div class="chapterSummary">
Chapter Summary Text for Chapter #2
</div>
</div>
</div>
</div>
</div>
<div class="storySummary">
<div class="card">
<div class="card-header shortStoryTitle collapsable">An Occurrence at Owl Creek Bridge</div> <!-- desired functionality: collapse when clicked -->
<div>
<div class="chapters sortable">
<div class="chapterSummary">
Chapter Summary Text for Chapter #1
</div>
<div class="chapterSummary">
Chapter Summary Text for Chapter #2
</div>
</div>
</div>
</div>
</div>
<div class="storySummary">
<div class="card">
<div class="card-header shortStoryTitle collapsable">A Horseman in the Sky</div> <!-- desired functionality: collapse when clicked -->
<div>
<div class="chapters sortable">
<div class="chapterSummary">
Chapter Summary Text for Chapter #1
</div>
<div class="chapterSummary">
Chapter Summary Text for Chapter #2
</div>
</div>
</div>
</div>
</div>
</div>

Why does this.classList.toggle("classname") affect parents of this as well?

I'm creating a website and I'm having some trouble with javascript. I have this function:
function offerboxclick(obj) {
obj.classList.toggle("menuelementclicked");
}
and my html looks like this:
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
<level>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
</level>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
</div>
The css code I think isn't relevant, because the problem is probably with the js function. As you can see, I have a multi level menu, and it works just fine when I'm clicking on the level 0 element to show hidden level 1 elements. But when I click any of the level 1 elements, the js function does work properly on the object, because it toggles "menuelementclicked" class on it. The problem is that it also toggles this class in parent menu element, so at the same time it opens level 2 and closes whole menu. I don't really know what to do now. Any help would be appreciated!
P.S. I tried putting my code on jsfiddle to show you all of it but for some reason on it doesn't work there at all 0_o

Scrollspy for Materialize not scrolling at all with Angularjs

I am trying to use scrollspy from Materialize (http://materializecss.com/scrollspy.html) to target each div that is created with ng-repeat.
However, it seems to me as if the scrollspy class is not doing anything. Instead of scrolling to that part of the page, the DOM just reloads and points to the portion of the page.
Another problem is that using href="/#community#sharingLove" is changing the website URL. Is there anyway for the scrollspy to work without adding to the URL?
<div class="full-height row" ng-controller="CommunityController">
<div class="col l10 main-content">
<div ng-repeat="principle in acmPrinciples" id ="{{principle.id}}" class="row full-width centering-text section scrollspy">
<div class ="col-md-12">
<h4>{{principle.title}}<h4>
</div>
<div class ="col-md-12 comm-description-container">
<p class="paragraph-style larger-font-size">
{{principle.description}}
</p>
</div>
<div class ="col-md-12">
<video class="responsive-video comm-video-height" controls>
<source ng-src="{{principle.videoURL}}" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="col l2 scroll-content">
<div class="row">
<div class="col hide-on-small-only m3 l2 scroll-items">
<ul class="section table-of-contents">
<li>Experiencing God</li>
<li>Sharing Love</li>
<li>Connecting Lives</li>
<li>Declaring Truth</li>
</ul>
</div>
</div>
</div>
</div>
I have linked included jQuery, bootstrap, and materialize. Last thing: other features of materialize work for me, just not the scrollspy. I also do
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});

I think if you remove #/community from the hrefs it should work. The href should contain the id of the block, not extra url info. Eg try using
Experiencing God

Selectize not working inside Bootstrap panel

I'm using selectize.js 0.10.1 with Bootstrap 3.0.1 in my project. When I have selectize combobox outside the collapsible Bootstrap panel, everything works great as you can see in the picture.
Working code:
<section class="container">
<div class="row" style="margin-bottom: 20px">
<div class="col-lg-4">
<select id="zastoj" placeholder="Razlog zastoja" class="demo-default selectized"></select>
</div>
</div>
</section>
When I have selectize combobox inside the collapsible panel, the combobox can not be opened/expanded on click, it looks like it's read-only.
Non-working code:
<section class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Operacije</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
</div>
</div>
</div>
</section>
I got it to work when I use Bootstrap 2.3.2 and selectize.js 0.9 in this fiddle, but I can't get it to work with Bootstrap 3.1.1 and selectize.js 0.9 in this fiddle. I even tried selectize 0.10.1, but no luck.
Can this be solved or is it some kind of version problem? I need to use Bootstrap 3.0+ in my project.

I know I'm a little late to the party, but I had a similar problem when selectize was initialized with the option:
dropdownParent: "body"
If you have this option in your selectize initialization, remove it.

The panel has the css style
overflow:hidden;
That is what keeps the selectize control from showing. You can either hard code the style or add it to your stylesheet.
<section class="container">
<div class="panel panel-primary" style="overflow:visible;">
<div class="panel-heading">
<h3 class="panel-title">Operacije</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
</div>
</div>
</div>
</section>
or in your stylesheet:
.panel, .panel-default, .panel-primary {
overflow: visible;
}

For those that are using selectize.js along with AngularJS, make sure the <select> is not inside a <div ng-if="..."> ... </div> cause it will not work. Instead, use ng-show and ng-hide instead. This also covers the scenario where a <select> is contained within a modal.
Example:
<!-- This won't work -->
<div ng-if="condition == true">
<select id="my-selectize"></select>
</div>
<!-- This will work -->
<div ng-show="condition == true">
<select id="my-selectize"></select>
</div>